<div> padding creates scrollbars

This code should sum it up, its psuedo code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>

<style>
.example {
      padding: 6px;
      background: #BFCFFF;
      width: 100%;
}
</style>

</head>

<body>
<div class="example">
<table style="width:100%">
<tr><td>stuff</td><td>more</td></tr>
</table>

The padding and width 100% on the css example make the scroll bar appear in firefox, and in IE with the DOCTYPE above (dosen't without the DOCTYPE).

Any suggestions on what I am doing wrong? How do I make the padding get taken into account the 100%, ie 100%-padding?!
thepaddersAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

DaydreamsCommented:
Hi thepadders,


Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
body {padding:0;margin:0;}
.example {
     padding: 6px;border:1px red solid;
     background: #BFCFFF;    /* removed the 100% here/*    
}

</style>
</head>
<body>
<div class="example">
<table style="width:100%">
<tr><td>stuff</td><td>more</td></tr>
</table>
</div>
</body>
</html>
0
thepaddersAuthor Commented:
Yeah, that probably will work (it worked when I just removed the 100% for the <div>, but the thing is there will not always be a <table>, ie the div is the container which is meant to be 100% wide - and then we have content in the div, in this case a table which i want to be 100%.
0
dij8Commented:
This seems to work:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.example {
     padding: 6px;
     background: #BFCFFF;
}
.example #fullwidth {
     width: 100%;
}
</style>
</head>
<body>
<div class="example"><table id="fullwidth">
<tr><td>stuff</td><td>more</td></tr>
</table></div>
</body>
</html>

I named the table in case you want to use something else.  You could replace:
.example #fullwidth {
with
.example table {
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

php-webdesignCommented:
this is a IE bug... try setting the body width just a few pixels smaller
0
DaydreamsCommented:
Hi thepadders,

In my example above you don't need the "body {padding:0;margin:0;}" unless you want it.

The div "example" (or any div) has by default a width of 100%. By adding it specifically to that div you get a width of 100% plus the padding, thus the scrolling.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
thepaddersAuthor Commented:
Thanks, that did it! I realised I had an extra master div set at 100%, I was using that to set the margins instead of the body because the navigation menu is flush to the sides. Removing this 100% fixed it, never realised that DIVS automatically where at 100%. Thanks so much!
0
DaydreamsCommented:
You're welcome, thepadders, and thanks for the A:)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.