View Full Version : Div's width set to 100% doesn't fill the entire screen ?

10-11-2002, 10:51 AM
I've got a few div tags on a page that should go all the way across the screen. To make things easier I assigned a class to them and set that class' width to 100%. However for some reason in IE (6.0), they don't go all the way across the screen - they stop about 40 pixels from the right. Does anyone know why ?



10-11-2002, 12:16 PM
What happends when you reload the page? What attributes or style are in your body tag?
A div's default width is 100% so there must be something in your code (or not) that's doing it.

10-14-2002, 08:45 AM
My body tag is empty and I haven''t assigned any classes to it. Below is the class I've assigned to one of the top div's :

.pageHeader, .pageFooter {
position : absolute;
background-color : #707070;
left : 0px;
color : #FFFFFF;
width : 100%;

.pageHeader {
top : 0px;
height : 100px;

Upon resizing and/or reloading the page, the div keeps an identical distance from the right margin. I'm doing some stuff in the onLoad but nothing that should influence the width of any layer ...



10-14-2002, 08:49 AM
Might try:

body {
overflow: hidden;

Could have undesirable consequences, though.


10-14-2002, 09:10 AM

body {

10-14-2002, 12:00 PM
Ok I've reset the position attribute to relative and suddenly the margin is decreased - now it's just wide enough to fit a scrollbar (if there should be any). Is this normal ?

Tried the padding and margin - didn't do much (but thanks anyway).


10-15-2002, 03:00 PM
When you copy-paste and preview this is there still a border at the right? Don't think so. Must have something to do with widths/positioning. (I'm on a Mac, don't have Win/IE6.)

<body style="margin:0px;padding:0px;">

<div style="height:80px;background:#666;"></div>

<div style="background:#ccc;">
<div style="height:60px;margin:10px 10%;background:#ebebeb;"></div>
<div style="height:60px;margin:10px 10%;background:#ebebeb;"></div>
<div style="height:60px;margin:10px 10%;background:#ebebeb;"></div>

<div style="height:100px;background:#fff;"></div>
<div style="height:80px;background:#666;"></div>

10-15-2002, 08:47 PM
The body style="overflow:hidden" should take away any scrollbars and give you a completely whole screen.

Outside shot...but maybe your screen resolution got reset (sometimes mine does for some reason)...

Reset to 800 x 600 or higher.

10-15-2002, 11:22 PM
Ok I'll try it tomorrow (getting kinda late over here) - I'll keep you informed...

Quiet Storm
10-16-2002, 01:05 AM
I had that problem in NS4.x...

I just put width:110%;


10-18-2002, 02:06 PM
Hi guys - sorry for the late reply but it's been real busy over here. Anyway I wanted to thank you all for your suggestions - unfortunately I won't be "able" to test them as we've taken a different approach to the page layout since yesterday (typically really - get close to a solution and the entire thing gets changed :rolleyes: ) but I will keep them in mind for future reference.