Previous Message
Next Message

dynamic div heights

Sent by ~davidLaakso on 23 March 2006 01:01

Diona Kidd wrote:
> Hi all,
> I have a design at that needs
> a little help regarding div heights and accessibility. I'm going for a
> table-less, clean, web standards compliant design (as close as possible).
> I want the design implementation to be as flexible and clean as possible.
Well, you could always put the content first in the source order of the 
document, and then view it in a browser with the CSS styles 
disabled.That's a pretty good way to think about the layout of an 
accessible site(some say).
OTOH, I think I better stick with the other non-css issues that have 
nothing to do with the practical application of CSS, like color and 
> If you look at the design, I'd like the div boxes (class="content_block")
> in the content area to grow downward to fill the area down to the footer
> area. The '3 columns' in the content area are contained within a div
> (id="content").
> I understand that div's have a 'height: auto' declaration by default. This
> is fine for this design unless there's not another div below meeting the
> footer area (or 'class="disclaimer" to be exact).
> There has to be a way to do this w/o tables...any ideas?
> This doesn't seem to be related to the 100% height divs as mentioned in
> some tutorials on the web. I did try that approach without any luck. I
> also tried a 'faux column' approach. I've been staring at this for a while
> and could really use a fresh perspective.
> Also, regarding text can I approach this design so when
> the text grows, the design doesn't completely blow up in the user's face?
> ;)
You can avoid font-scaling problems by not setting height on ul's, and 
letting the content determine the height of containers. If need be, use 
faux columns.
Since your interest is in accessibility, you may want to set the content 
text to user default, and provide adequate value(b & w) contrast for it. 
You could do this in your present stylesheet by changing 0.8em on the 
body to 1.0em, and not define a font-size for p.Keep in mind, with em on 
the body, you'll also need to 100% on html. Otherwise IE(a bug) goes 
goofy on font-zoom. And, personally, I'd delete the font-sizing gizmo.
> Thanks in advance!
> Diona


Typography exists to honor content. 
--Robert Bringhurst

css-discuss [EMAIL-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: