CODEWITHSUNDEEP
htmlcss
KingNestor
KingNestor

Reputation: 68000

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

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

Here is a screenshot: alt text

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

Upvotes: 1

Views: 1792

Answers (6)

Pär Wieslander
Pär Wieslander

Reputation: 28934

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.

Upvotes: 2

Mark Byers
Mark Byers

Reputation: 838836

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

Upvotes: 0

jgallant
jgallant

Reputation: 11273

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

Upvotes: 2

Soufiane Hassou
Soufiane Hassou

Reputation: 17750

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.

Upvotes: 1

Glennular
Glennular

Reputation: 18225

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.

Upvotes: 2

jaywon
jaywon

Reputation: 8234

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.

Upvotes: 8

Related Questions