Forum Moderators: not2easy

Message Too Old, No Replies

100% width div

IE solution, I think

         

Reflection

6:32 pm on Jun 17, 2003 (gmt 0)

10+ Year Member



Ok I was just about to post a stupid question about why IE will not render a div to 100% of the browser window and just before I hit submit I thought I would try one more thing. I couldnt find the answer on this forum(it has to be here somewhere) but I thought I would post it anyway in case someone else is having the same problem.

The solution was to give the body a margin of 0px.

Is this the correct way of getting around this problem?

Thanks

Nick_W

6:37 pm on Jun 17, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well, you're not actually getting round a problem. For once, it sounds like IE is behaving itself ;)

The margin on the body element can be (i think) whatever the browser vendor wants it to be. You, as a concientious and superbly aware designer may change that with CSS.

Elements should not normally encroach into that 'margined' area.

hehe, glad it worked out!

Nick

DrDoc

6:41 pm on Jun 17, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



See the parent element as a box (literally).

If you put something inside it to fill it 100%, it will never expand to the outer wall of the box, right? The wall thickness is important. The thicker the box, the less room inside it.

It's the same way with CSS. The only difference is that in CSS you can set the "wall thickness" (=padding) to zero, which will allow a nested element to take up just as much space as its parent.

<added>
And, technically you would want to change the padding for the body element. Padding is the space between the box border and contents. Margin is the space between the box border and surrounding elements.

We've been slightly deceived in the past by using attributes such as leftmargin, topmargin, etc. They never affected the body margin. Instead, they affected the inner padding.

Modern browsers seem to be forgiving. Specifying both zero padding and zero margin is probably the safest solution, though.
</added>

Reflection

6:54 pm on Jun 17, 2003 (gmt 0)

10+ Year Member



My original problem was that I had a menu bar absolutely positioned at the top left of my page. This menu bar had a black background so in IE I was left with white space on the right hand side, however in Mozilla there was no whitespace.

I was assuming that I was encountering IE box model problems but I guess I wasnt, as Nick pointed out.

Nick_W

7:31 pm on Jun 17, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



>>Margin is the space between the box border and surrounding elements.

Wouldn*t that be <html> in this case?

Nick

DrDoc

6:28 am on Jun 18, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Wouldn't that be <html> in this case?

In IE5/Mac and IE6/Win, yes. In other browsers - nah, the <html> element is only a ghost container.

DrDoc

6:29 am on Jun 18, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



however in Mozilla there was no whitespace

So, what did you have in Mozilla? <confused>

Reflection

4:27 pm on Jun 18, 2003 (gmt 0)

10+ Year Member



So, what did you have in Mozilla? <confused>

In Mozilla the menu bar filled ALL of the browser window, doing exactly what I thought 100% width should do. However this was not the case in IE.

<style type="text/css">
#bar{position:absolute; top:0; left:0; width:100%; height:25px; background-color:#000000;}
</style>

<body>
<div id="bar"> </div>
</body>

Yoeri

7:27 pm on Jun 23, 2003 (gmt 0)

10+ Year Member



The solution was to give the body a margin of 0px.

I always set the following styles ..

body {
margin: 0;
padding: 0;
}

Opera sets padding instead of margin ...