The trouble i have is that as content is added to the right div, the main div is not expanding vertically to contain the floating div, so the float div ends up outside the bounds of the container div. If I use the compatability mode of IE8 it all works fine, but Firefox and IE8 in normal mode don’t work.
overflow:hidden on the container should contain the floats. For IE6, make sure the container has Lay out (either by setting a dimension on it or using one of hasLayout triggers)
Hi, on “div.mainbody” you set the min-height to be 400px but since it doesn’t think it has any content (since they are floated) then it doesn’t expand. Add overflow:hidden; to that and all will be good
I had a sneaky feeling it might require the whole code, but i’ve spent ages before posting loads of code only to find it was a very simple isolated error, so now i always start small and expand!
On a serperate note, I seem to have a strange gap under the header buttons - this only appears in compatability mode (IE7) etc and on firefox - any ideas?
Also, any other critiques you may have on my css would be greatly appreciated - as you can probably see I am at the intermediate stage having moved from a tables based layout.
Are you talking about the default top margin on the p element that is moving the works “Pick Your Car” down the page?
IE7 and under don’t apply a top margin by default but only apply a bottom margin, whereas most other browsers apply a top and bottom margin to most elements (although with differing values).
Whenever you use an element you need to set explicit padding and margins or you will find differences all the time.
p{margin:0 0 1em 0}
This is why resets are popular with intermediate levels because they don’t know what elements have defaults and the reset “resets” them all in one go to some sort of standard. In reality you could just do this as you code but whatever method you use you should understand the reasons for it and why it is necessary
Images are treated like text and sit on the baseline with room underneath for descenders unless you set them to block level and then they sit on the bottom of the line.
If you need the images as inline elements then you can usually set their vertical alignment to top to cure the gap.
Thanks Paul, i’ll give that a go later. Takes some gettting used to this css business! There nothing like spending all day getting your design perfect only to then try it in a different browser and…:injured:
