CSS: how to get two floating divs inside another div


Tags: css

Problem :

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>


Solution :

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.


    CSS Howto..

    How can I use a link to navigate between input boxes?

    how to select an anchor tag with a specific id inside a ul using css

    How to tell what in CSS files that is not used? [duplicate]

    How do I optimize a very loooong page with TONS of images on it?

    How to automatically update relative CSS paths for minification?

    How to make an entire square div clickable with CSS?

    How to make scrollable table's header fixed using css fixed position property?

    how to set size of canvas to its background image?

    CSS - How to center Absolute Position div with max width in IE9,10,11

    How to keep sub div from considering height of its cousin?

    How to apply css styling on rewards points notification email in opencart 2.0.1.1?

    How do I assign styling to a Javascript variable?

    How to inject css into a document via ajax?

    How can I put solid lines on either side of a header with css? [duplicate]

    how to fadein an inline element as a block element

    How to apply css to div which has no class?

    How to fill an HTML form with CSS?

    Panel in Horizontal List item showing behind Button

    How to style easypiechart using CSS?

    How to create shadow in JSF input field

    How do I go about dynamically splitting a body of text into two even columns with plain Javascript (no JQuery)?

    How to add an unknown amount of dots to a line depending on length of word?

    How to display a horizontal line before and after a heading in css

    jquery div hidden and show, z-index issue and mouseover/mouseout issue

    How to add CSS to CKEDITOR?

    How to fix parent hover issues with CSS?

    CSS - How to use by ID and by class

    Slideshow won't accept fixed height

    How to get item to appear on mobile homepage only(wordpress)

    How to place the text in the top right corner and not show buttons when printing