Floats and position problems on hover

[tidalik]

I have 2 menu div's floating to the right of a canvas.  They menus are designed to slide out on hover and slide back to normal afterwards.

 

The problem is that when I hover on the second div, the location (position) of the first div shifts with it.

 

Example of it in action is at: http://jsfiddle.net/Xb2q9/

 

I know it has to do with the order that the divs are listed and position: relative but haven't managed a work around.

 

My HTML

<table class="unpadded-table">
<tr>
<td>
    <div id="screen">
    <canvas id="screenCanvas" width="640" height="480" sytle="border:1px soid #000000;" class="example">Your browser doesn't support HTML5canvast</canvas>
    <div id="firstmenu">
        <div id="firstmenucontents">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum lacus nec felis condimentum, et feugiat felis adipiscing. In hac habitasse platea dictumst. Integer in felis placerat, porta arcu in, aliquam nulla. In fermentum sed odio sollicitudin lobortis. Morbi id commodo orci. Quisque semper sem in sem bibendum lobortis. Praesent nisl purus, sollicitudin non est vitae, dapibus dictum libero. Nam sem sem, lacinia sit amet quam quis, vulputate facilisis purus. Ut placerat euismod felis, non pharetra libero dictum in. Pellentesque elit est, lacinia sed nibh quis, tempor interdum enim. In ante ligula, bibendum et accumsan ut, sagittis quis purus. Morbi tempor nisi vel feugiat consectetur. Vivamus at porttitor risus, tristique bibendum risus. Nullam vel venenatis lectus. Maecenas quis interdum mauris.</div>
    </div>
    <div id="secondmenu">
        <div id="secondmenucontents">Etiam varius orci in diam fringilla sollicitudin. Etiam ac vestibulum nisi, at vulputate massa. Proin porta nec metus tincidunt imperdiet. Sed vel pellentesque sapien. Quisque gravida eros eget neque commodo feugiat. Donec ut ante sit amet nisl auctor varius. Phasellus placerat arcu viverra lacus dictum, at lobortis massa dictum. Morbi eget imperdiet mauris. Sed lobortis venenatis turpis. Nulla et orci arcu. Nunc ultrices elit in massa venenatis venenatis. Aenean non nibh id massa hendrerit sodales vitae sed sapien.</div>
    </div>
</div>
</td>
</tr>
</table>

My CSS:

#firstmenu {
	float:right;
	background: url('http://www.bussecombat.com/images/rollover/rollover_10-Anatomy-of-a-bu.gif') no-repeat right top;
	padding-left: 10px;
	;
	margin-top: 15px;
	padding-top: 0px;
	width: 10px;
	height: 180px;
	position:relative;
    overflow:hidden;
    transition: left 0.5s;
     -webkit-transition: left 0.5s;
    -moz-transition-duration:.5s;
    -o-transition-duration:.5s;
	 display: inline-block;
}

#secondmenu {
	float:right;
	background: url('http://www.dailyblogtips.com/wp-content/uploads/googlevert.gif') no-repeat right top;
	padding-left: 10px;
	margin-left: 0px;
	padding-top: 0px;
	width: 10px;
	height: 250px;
	position:relative;
    overflow:hidden;
    transition: left 0.5s;
     -webkit-transition: left 0.5s;
    -moz-transition-duration:.5s;
    -o-transition-duration:.5s;
	margin-top: 250px;
	 display: inline-block;
}

#firstmenucontents{
	background: #ffffff; 
	margin-right: 15px;
	margin-top: 0px;
	margin-left:0px;
	width: 135px;
	overflow:hidden;
    -webkit-transition-duration:.5s;
    -moz-transition-duration:.5s;
    -o-transition-duration:.5s;
	opacity:0.0;
	border:1px solid black;
	float:left;
}


#firstmenu:hover{
	width: 150px;
	opacity:1.0;
}

#secondmenu:hover{
	width: 150px;
	opacity:1.0;
}

#firstmenucontents:hover, #secondmenucontents:hover {
	opacity:1.0;
	width: 135px;
}

.example {
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
	border:1px #000 solid;
	float: left;
	width: 655px;
	margin-left: 100px;
	width: 

}

Edited August 22, 2013 by tidalik

[Love2c0de]

Good morning,

 

I can only see 1 div - the second one.

 

Regards,

 

L2c.

Edited August 23, 2013 by Love2c0de

[tidalik]

An image disappeared so you didn't realise the div was there.  Try:  http://jsfiddle.net/Xb2q9/4/

[Love2c0de]

Good morning,

 

Sorry for the late reply.

 

Well, I've fixed the problem of the second div moving when the first div is hovered.

 

Add clear: right to the #secondmenu div before the float declaration.

 

That's fixed but it seems to shift the 2nd div down the page quite a bit.

 

Hope it helps you.

 

Regards,

 

L2c.

[tidalik]

Unfortunately L2c your fix doesn't work.  It shifts the canvas down the page and I still have the first div sliding out when I hover on the second div.