100% width isn't quite full width I.E.

mattyod

11-23-2005, 10:29 AM

Hi,

I've worked and fiddled with CSS for quite some time now but I recently discovered a new "oddness" with 100% widths and I.E. that I hadn't had need to come across before. I was wondering if anyone was familiar with this and even new a work around for I.E.

I've been investigating the possibility of a layout with both a mid page navigation bar and a footer that bleeds to the full width of the screen. To help visualise what I am talking about you can look at this with Mozilla.
http://www.mtod.co.uk/cssexp

Now in developing this I noted a couple of things:

In both Moz & I.E 100% width actually leaves a small border at the edge of the page. This can be fixed for Mozilla by using position: absolute and left: 0px. Forcing the block to the absolute edges.

In I.E. this solution left an even bigger "gap" at the right hand side. So just playing around with my browsers set at 1024 resolution I discovered that giving 100% widht to Moz & 102% width to I.E. forced the block to both edges in both browsers.

The code for my example is as follows:

CSS:
.pageContainer
{
position: absolute;
left: 0px;
top: 0px;
width: 100% !important;
width: 102%;
background-color: #ccc;
}

.navBar
{
width: 100%
display: block;
background-color: #fff;
}

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>test page</title>

<link rel ="stylesheet" type ="text/css" href ="styles.css"/>

</head>

<body>

<div class=pageContainer>
hello

<div class=navBar>
hello
</div>
hello
</div>

</body>
</html>

Now at this point I thought I had been quite clever until I started resizing the I.E. browser. Now you see I.E. seems to be dynamically altering this percentage as the page resizes down to smaller screen sizes. As you make the browser window smaller a gap appears on the right hand side, the smaller you go the larger the gap gets.

Just open my example http://www.mtod.co.uk/cssexp in I.E. and drag the browser around a bit to see what I mean.

OK, I'm sorry this was so long & I hope I've explained myself properly. Has anyone got any clue how to gt I.E. to behave itself here or have I just found another brick wall to bang my head against?

Thanks in advance :)

coothead

11-23-2005, 11:38 AM

Hi there mattyod,

There is no need to use absolute positioning for this. :eek:
Just set body margins and padding to 0px.....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test page</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<style type="text/css">
/*<![CDATA[*/
html {
overflow:auto; /* this removes the scroll in IE */
}
body {
margin:0px;
padding:0px;
}
.pageContainer {
background-color:#ccc;
color:#000;
}

.navBar {
background-color:#fff;
color:#000;
}
/*//]]>*/
</style>

</head>
<body>

<div class="pageContainer">
hello
<div class="navBar">hello</div>
hello
</div>

</body>
</html>
coothead

ronaldb66

11-23-2005, 12:00 PM

Besides that, divs should have default "width: auto;" which should make 'em fill the available horizontal space to the brim anyway--provided they're left in the normal flow, that is.

mattyod

11-23-2005, 02:34 PM

aha thank you. It hadn't occured to me that the problem could be with padding & margins on the main body.

There is still a tiny quirk with this method in that if you squish the I.E. browser so that it doesn't cover the full height of the content (the 3 colorod lines in this case) then suddenly a horizontal scroll bar appears and the content becomes slightly wider than the visible area.

Removing the "overflow:auto" from the html section fixes this. What does that line do exactly?