CSS: how to get two floating divs inside another div

css

I'm sure this a common problem, but couldn't find the exact answer 🙂

I have two divs inside another div. I want the two divs to be on the same level, one floating to the left and the other to the right. But they won't get inside the parent div unless I use position: absolute on the parent. But then the child-divs won't stay on the same level :S

#main {
    margin-left: 30px;
    margin-top: 20px;
    position: absolute;
}

#left_menu {
    width: 150px;
    float: left;
}

#content {
    margin-left: 20px;
    float: right;
    border: 1px solid white;
}

    <div id ="main">
    <div id ="left_menu>&blablabal</div>
    <div id ="content">blablb</div>
    </div>

Best Answer

your margin-left of #content should include the width of #left_menu. Thus should be 

#content {
    margin-left: 170px;
    /* float: right; */ /* no need for a float here */
    border: 1px solid white;
}

You also don't need a position:absolute for your #main (unless other purposes)

So finally: 

<style type="text/css"><!--
#main {
    margin-left: 30px;
    margin-top: 20px;
}

#left_menu {
    width: 150px;
    float: left;
}

#content {
    margin-left: 170px;
    border: 1px solid white;
}
.c{clear:both;}
--></style>
    <div id="main">
    <div id="left_menu>&amp;blablabal</div>
    <div id="content">blablb</div>
    </div>
    <div class="c"></div>

.c is to clear and pushes the bottom content off the floats.

Related Topic