Previous Message
Next Message

dynamic div heights

Sent by Zoe M. Gillenwater on 23 March 2006 12:12


Diona Kidd wrote:
> I have a design at http://www.modernflow.com/client_data/test/ that needs
> a little help regarding div heights and accessibility. <snip>
>
> 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.
>   

Faux columns is perfect for this design. What didn't work? Can you show 
us what you tried?

There are a couple other equal height column techniques:
http://www.positioniseverything.net/articles/onetruelayout/equalheight
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
http://www.sitepoint.com/article/exploring-limits-css-layout

Lots of info and links at:
http://css-discuss.incutio.com/?page=AnyColumnLongest

> Also, regarding text enlargement...how can I approach this design so when
> the text grows, the design doesn't completely blow up in the user's face?
> ;)
>   

This is a generalization, but it's true 98% of the time: never set 
heights. Don't do it. Let content determine height. This not only 
protects your design from larger text sizes, but also from when your 
client comes back and wants to add a page more of text to your little 
fixed box.

Also, don't lay real text over images unless that text can overflow off 
the image without looking bad or the image can "grow". In your case, you 
could make the header image three times larger than it is now but only 
show a piece of it at the initial font size. Then as the text grows, the 
header could grow too, revealing more of the background image. Make sure 
to assign a matching background color so that when the background image 
eventually runs out, the white text could still sit on top of the color 
and be readable.

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu


______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: