[thelist] DIVs with height not expanding vertically

Ian Anderson ian at zstudio.co.uk
Mon Mar 14 03:52:40 CST 2005

Greetings all - lovely morning here in the UK

Wondered if anyone could offer any guidance with this; DIVs not 
expanding vertically as the content grows if they have their height set 
through CSS.

I am creating areas containing company details, enclosed in a DIV tag 
like this;

<p>Company Name</p>
<p>Address 1</p>
<p>Address 2</p>
<p>Web address</p>

I'm sure you know the sort of thing. Not all companies (records in DB) 
have all fields. Most have very few, and the information is displayed 
closed-up so there are no annoying gaps. All good so far.

For design reasons, the DIV has a fixed height and a coloured 
background. Again, for design reasons and efficient use of space, the 
height is set to a sort of average amount. Most entries have space at 
the bottom of the div and it looks nice.

Should there be *more* entries than the height allows, in IE6 for 
Windows the DIV is shown to expand vertically to accomodate them. BUT in 
Firefox and Safari, the box remains the specified size, and the content 
overflows down into the surrounding area.This also happens when the text 
size is increased in the browser in any fixed height DIV on the page.

I was astonished to read (forget where) that the IE behaviour is wrong 
here, and that Firefox and Safari are behaving to spec.

Can anyone verify that this behaviour is as intended?

I imagine I should be using min-height to set the minimum height, but 
this is not respected in IE. Most of my clients use IE.Argh!

(sorry to refer to previous winge, but tables don't pull this kind of 

If anyone has any sensible suggestions, I'd love to hear them...

Many thanks, people - Have a good one

Ian Anderson

PS - I suddenly realised I can presumably use a collection of Obscure 
CSS Hacks(tm) to deliver a height to IE and hide it from better 
browsers; this is not a prospect that fills me with joy... I have a 
bunch of fixed height DIVs and the style sheet is already bigger than I 
am. Think I'll give up web design and go back to painting sheds; the 
hours are better and the work is pretty much the same these days.

Let's see, I need the IE Hole in Head fix, the Warsaw-Zackinsky Parent 
Child Selector Dodge; but of course if you use that on a Monday you 
mustn't forget the Helsinki Syndrome Workaround. Unless you consider IE5 
for Mac too, in which case you need to use the Irving Welsh Sliding 
Windows trick before the Helsinki Workaround or it breaks in Opera for OS/2.


<tip type="cynical">
Thinking of moving to CSS layouts? Save time and simply smack yourself 
repeatedly in the forehead with a club hammer...

More information about the thelist mailing list