Home/ Questions/Q 3808812
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T15:12:26+00:00

Here’s my code, reduced to the relevant parts: <html><head><title></title> <style type=text/css> body { background-color:

  • 0

Here’s my code, reduced to the relevant parts:

<html><head><title></title>
<style type="text/css">
body { background-color: #fff; }
#titlebar{ border: solid 1px black; margin:10px; }

#bodyWrapper{ float: left; width: 100%; }

#bodyColumn{ margin-left: 230px; height:500px; }

#menuColumn{
    float: left;
    width: 230px;
    border: solid 1px black;
    margin-left: -100%;
    height:500px;
}

.bigContent{ width: 100%; margin:10px; }

.section{
    border: 1px solid black;
    padding:10px;
    overflow: auto;
}
</style></head><body>

<div id="titlebar">Title</div>
<div id="bodyWrapper"><div id="bodyColumn">

<table class="section bigContent"><tr><td>FIRST</td></table></table>
<div class="section bigContent">SECOND</div>

</div></div>
<div id="menuColumn">MENU</div>
</body></html>

My problem:

  • The <div> containing “SECOND” is wider than the <table> containing “FIRST” although both are siblings and have width=100% via the same CSS class
  • The <div> is also wider than the screen, causing scrollbars to appear

Why is this and what can I do to fix it?

Note: I am seeing the same problems in both Firefox 3.6 and IE 8

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is because of the padding. In CSS, the width property applies to the content box of elements, without the padding.

    See http://www.w3.org/TR/CSS21/box.html : The width property applies to the Content block in the following schema:

    So the outer element’s width is 100% of the parent’s width, plus 10px of left padding and 10px of right padding.

    Given that this element is a block element, it should not be necessary to specify its width to 100%.

    So the solutions are:

    • To not set a width
    • To take the padding into account when setting the width (here this would require to set the padding in %, e.g. 2% of padding and a width of 96% (100-2*2)
    • 0