Positioning two floating blocks in absolute positioned division - html

Question

here is the code
http://jsfiddle.net/77NBM/12/
two grey squeares ("float 1" and "float 2") have to be positioned beside each other in absolute positioned division "submenu_container" related to < li > "menu 3".
Can plz somebody help me to get it? :(
Thx!

Answer 1

If you'll always have two elements ("float1 and float2") of 100px each, you can set the width of .submenu_container to 220px and they will float beside each other. like this http://jsfiddle.net/77NBM/13/
If the width of the elements ("float1 and float2") is dynamic, I suggest you set the width of .submenu_container dynamicly width javascript or jQuery. for example:
$('#main_menu li').each(function(index) {
var menuWidth=0;
$(this).children().children().each(function(index) {
menuWidth+=$(this).outerWidth();
}
$(this).children('.submenu_item').width(menuWidth)
});

Answer 2

The width of your submenu is being constrained by the width of your li element, just add some width to your submenu and they should float:left naturally
CSS
#top{
width:500px;
height:300px;
position:relative;
margin:0px auto;
background:#ccc;
}
#navigation{
position:absolute;
width:100%;
height:50px;
top:250px;
left:0px;
background:#f00
}
#main_menu{
width:auto;
height:50px;
margin-left: 0;
padding-left: 0;
list-style-type: none;
}
#main_menu li{
width:100px;
height:50px;
margin-right:10px;
float:left;
background:#ff0;
position:relative;
}
#main_menu li a{
display:block;
width:inherit;
height:inherit;
}
.submenu_container{
position:absolute;
background:#00f;
padding:5px;
left:-5px;
width:275px;
}
.submenu_item{
width:100px;
height:100px;
float:left;
background:#eee;
margin:5px;
}
http://jsfiddle.net/77NBM/17/
By the way, your html markup is full of errors, you need to take a look at that.
HTML
<div id="top" class="center">
<div id="navigation">
<ul id="main_menu">
<li>
Menu 1
</li>
<li>
Menu 2
</li>
<li>
Menu 3
<div class="submenu_container">
<div class="submenu_item">
Float 1
</div>
<div class="submenu_item">
Float 2
</div>
</div>
</li>
<li>
Menu 4
</li>
</ul>
</div>
</div>

Answer 3

#top{
width:500px;
height:300px;
position:relative;
margin:0px auto;
background:#ccc;
}
#navigation{
position:absolute;
width:100%;
height:50px;
top:250px;
left:0px;
background:#f00
}
#main_menu{
width:auto;
height:50px;
margin-left: 0;
padding-left: 0;
list-style-type: none;
}
#main_menu li{
width:100px;
height:50px;
margin-right:10px;
float:left;
background:#ff0;
}
#main_menu li a{
display:block;
width:inherit;
height:inherit;
}
.submenu_container{
width:auto;
position:absolute;
background:#00f;
padding:5px;
left:-5px;
}
.submenu_item{
width:100px;
height:100px;
float:left;
background:#eee;
margin:5px;
}