[CSS] IE's white space at the bottom of main div

[Sic]

really sorry to keep asking all this CSS stuff - i've googled, but not been able to find anything about this - it's only in IE that i've found this.

large image

i've put a border around it so it's possible to see what's happening, my main div:

#container {
width : 780px;
margin : 0 0 0 0;
padding: 0 0 0 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
border-style: solid;
border-width: 1px;
}

has a load of white space at the bottom, and yes, it's only the container because i've put borders around all the internals and they're all perfectly proportioned. can anyone see what i've obviously done wrong, as i honestly can't see it

 

[Flanders]

Im not sure I understand. Would be much easier if you upload the site your working on.

On the CSS you have posted, the padding and margin only need one zero, eg:

padding: 0;

Nit picking I know, but could make a difference over the whole file

 

[Sic]

that changing everything to 1 '0' didnt do anything. i've gone through the painful task of uploading it all (no ftp here )

this is what it looks like (with the border, so you can see what i mean)...really really frustrating

 

[Mr_L]

that changing everything to 1 '0' didnt do anything.

It wouldn't, it's just shorthand for what you already had.

In FF the whole of the right content area isn't even there in any shape or form. I think it's got something to do with the way it is floated. Float can be a bit tricky sometimes.

Edit: Screenshot included.

 

[Sic]

that's because that's only using the IE stylesheet (i have a stylesheet for each browser, it's supposed to make it easier on the CSS...supposed )

 

[D4VE]

I dont see why you'd need stylesheets for multiple browsers, its not that complicated.

add a * {margin: 0; padding: 0, border: 0} at the start of the stylesheet to cancel out any unwanted spacing.

 

[Sic]

well, evidently it is quite difficult, because that * margin padding thing didnt work. i've had a further look around, and it seems that if you use relative positioning, it makes the boxes all gay. i would use absolute positioning, but surprise surprise, i can't absolute position it in the container div...that's what relative positioning's for! i think i'm actually going to tear my hair out - i cant find an answer as to why this is doing this why does IE have to be SO different?!

 

[Augmented]

To absolute position elements inside #container, relative to the edges of #container, give it a position property by assigning it position: relative; .

 

[D4VE]

Relative and IE dont work well.

I would float the left column left, & the right column right in the container

 

[Sic]

To absolute position elements inside #container, relative to the edges of #container, give it a position property by assigning it position: relative; .

that's what i'm doing, but it's creating a tonne of white space at the bottom of the div

Relative and IE dont work well.

I would float the left column left, & the right column right in the container

so, you're saying that there's no way to do it? i need to be able to have 100% control over the objects in that div, they need to be precisely in the right place, and there's no way i can do that (as far as i'm aware) without relative positioning

 

[D4VE]

I didnt see Augmenteds reply, but Ive had a lot of trouble with relative positioning.
I always make the container and float the divs in place as this seems to work on all browsers.

Ill have a look in Firefox later as I cant see the problem right now because Im at work and dont have FF.

 

[Sic]

yeah, but floating isn't going to work because i need to be able to budge things around and position paragraphs within divs. i refuse to believe that internet explorer is so retarded as to mess up this much with relative positioning.

also, that's just a temporary link, open this in Firefox...that should work (it was done in Fx mac...so it *should* be ok)

 

[Augmented]

that's what i'm doing, but it's creating a tonne of white space at the bottom of the div

But from what I can see you're relatively positioning all those elements within #container, not absolutely positioning them relative to #container.

To position elements relative to the edges of #container, #container needs to have a position: relative property (or another property that will give 'position') and descendant elements position: absolute;.

Absolute positioning is the process where you position an element relative to another element. Relative positioning is the process where you position an element relative to itself.

The problem I believe I can see is that all you're doing is moving elements from where they should have been, leaving the space behind that they created in the document flow. All that whitespace at the bottom is the space created by the elements you've 'shifted' upwards with relative positioning. A relatively positioned element has its original allocated space 'reserved' by the renderer. No other element in the normal document flow can exist within that space.

To remove this whitespace you need to use absolute positioning on these elements - this removes them completely from the document flow i.e. their size, shape and position will have no effect on neighbouring elements.

 

[Sic]

yeah, i assumed that the reason i was getting all this whitespace is because i'm leaving it all behind. so if i give #container a position:relative attribute, it'll allow anything inside it that's position:absolute to be relative to container? or have i missed something?

 

[Augmented]

so if i give #container a position:relative attribute, it'll allow anything inside it that's position:relative to be relative to container? or have i missed something?

Yes, that's right.

Absolute positioning places an element relative to its 'nearest positioned ancestor'. By default, the only element that is positioned in a screen is the edge of the window - that is typically the <body> element.

Take:

<body>
 <div id="ancestor">
  <div id="child"></div>
 </div>
</body>

If you straight away try and absolutely position #child 10px from the top and left of #ancestor, it won't work. The renderer always look for the nearest ancestor element that is positioned, and uses that as the reference point. This, as I noted, will be the <body> element. So, if you were to resize your window, #child will always be 10px from the top and left of the browser window. This is something that typically catches people out, and sways them away from using absolute positioning because it's not the most logical thing to expect.

So, if you specifically give #ancestor a position: relative; property, it suddenly gains extra power and becomes 'positioned' (I'm sure there's a specific term, but that how I think of it). Now #child will be positioned 10px from the top and left of #ancestor .

The great thing about this is that if you now fix the width and position of #ancestor e.g. 760px centred, #child will always stay where you expect it, and not relative to the size of the browser window.

I do the majority of my layouts with position: absolute;, and position: relative; when I need to jog an element a few px. Floats are really a typographical/typesetting mechanism - when you need to float an element next to some text, such as with an illustrative photo. Not to say you can't use them, but it's not really their purpose and I find tend to cause more headaches that they're worth.

Recommended article - http://www.autisticcuckoo.net/archive.php?id=2004/12/07/relatively-absolute

 

[Sic]

omg Augmented, you appear to have struck again - it seems to be working (although i'm having to go through and re-position everything, it's a damn site better than having no solution at all!!)

i take my hat off to you, yet again.

thanks to everyone else for your suggestions