Question

I have this fragment of HTML:

<style>
    #top, #left, #right
    {
        border: 1pt solid silver;
        margin: 3px;
    }
    #left
    {
        float: left;
        width:50%;
    }
    #right
    {
        float: right;
        width:50%;
    }
</style>
<div>
    <div id="top">Text</div>
    <div id="left">Text</div>
    <div id="right">Text</div>
</div>

I want the “left” and “right” divs to take the entire width of the screen, so I set their width to 50% each.

For some reason, the “left” and “right” divs overlap — the “right” div is under the “left” div. What is the correct way to style these divs so they are displayed side-by-side and occupy the entire width of the screen.

Thanks.

Answer 1

See http://jsfiddle.net/ER8pR/1/

CSS:

   #top, #left>div, #right>div
    {
        border: 1pt solid silver;
        margin: 3px;
    }
    #left
    {
        float: left;
        width:50%;
    }
    #right
    {
        float: right;
        width:50%;
    }

HTML:

<div>
    <div id="top">Text</div>
    <div id="left"><div>Text</div></div>
    <div id="right"><div>Text</div></div>
</div>

The problem is that the total widths of #left and #top are

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

In your case, 3px+1px+0+50%+0+1px+3px = 50% + 8px, so if you sum them you get 100% + 16px, which is greater than 100%.

You can fix it removing all margins, paddings and borders and creating a new <div> inside them with width:auto and the margins, paddings and borders that you want.