Why is this div column not going all the way to the right?

Question

Strangly enough, my website is rendering fine in Internet Explorer but fails in Mozilla based browsers.

Here is a screenshot:

Does anyone see why "right-panel" does not go all the way to the right? You can see how it is not lined up with the right edge of "top-panel":

#container
{
    margin: 0 auto;
    width: 750px;
    background-color: #ffffff;
}

#top-panel
{
    padding-left: 10px;
    background-color: #000000;
    text-align: left;
    width: 100%;
    height: 88px;
}

#left-panel
{
     padding-top: 10px;
     text-align: center;
     background-color: #ffffff;
     border-right: 1px dashed #000000;
     float: left;
     width: 250px;
}

#right-panel
{
    background-color: #ffffff;
    float: right;
    width: 449px;
}

.clear
{
    clear:both;
    line-height:0;
}

If anyone wants to see the actual site it is: Math Relay

Answer 1

When you apply width:100% and use padding-left:10px also, it computes the width first, and then applies the padding, so actually your #top_panel CSS declaration is the problem. Try setting it to a fixed width for that.

Answer 2

it is the padding-left:10px; in the #top-panel

Set that to 0 and you'll see them line up.

Try using FireBug, that's how i found the issue.

Answer 3

It's your #top-panel that's 10px bigger that your #container because of your padding-left: 10px;

Just add 10px to your #container and it will be good.

Answer 4

The Padding-Left:10px is causing an extra 10 pixels to appear on the right hand side.

Answer 5

Remove the width: 100% from #top-panel.

Answer 6

Along the lines of the other answers, but hopefully explaining what's happening behind the scenes, too:

The width: 100% on #top-panel refers to the width of the div's content area, excluding borders, padding and margin. Thus, when you specify both width: 100% and padding-left: 10px the width of #top-panel including padding is actually 10px + 750px (the padding plus 100% of the width of #container.)

The best solution in my opinion is to remove width: 100% from #top-panel. This will make the div take up the entire width of the parent element withut overflowing the #container.

The page looks ok in Internet Explorer since IE incorrectly includes padding and border when calculating the width of the div if the page is rendered in quirks mode. More details about this bug can be found here.