View Full Version : CSS Help with Flexible Layout

Dec 31st, 2006, 09:45 PM
I am having trouble making some text in my layout be able to increase in size and have the layout stay flexible. I am referring to increasing the text size in browsers like Firefox (ctrl+ "+").

The troubled text is located in my header, in my nav, and the text over my main image. Could someone please give me a pointer in how I can make my current layout flexible when the text size is increased?

The .html file is located here:http://www.mikeperla.com/webtest/test.html

and the css file is:

Thanks for the help,

Jan 1st, 2007, 04:24 AM
In order to have scalable text in IE6 you must not specify font sizes using pixel measures. Any other measure will work. But there are problems with the pt (point) measure since this depends on the users dpi setting. You should probably use percentages or the em unit. For example:

font-size: 1em;

If you do this throughout your entire stylesheet you will have text that obeys scaling through the CTRL+'+' in IE (or CTRL+ mouse wheel).

If you want to go even further, you could also specify your div widths and other element widths using this measure. This is not so common, but it is then possible to create layouts where (almost) all elements magnify when users use the browsers CTRL+'+'. Personally I like this.

Nothing prevents you from doing this with images also. Strangely I almost never see this. Does anyone know why? And does anyone know why we don't have zoom buttons in our browsers just like in the Acrobat Reader when we view PDF's? I would like to know.

Edit: Fantastic..., I just learned that IE7 and Opera 9 indeed does have something that resembles real page zoom.

Your post reminded me of Jakob Nielsen's excellent discussion (http://www.useit.com/alertbox/20020819.html) about usability and font sizes where IE was highly critisized.

Jan 2nd, 2007, 03:50 PM
I switching my font sizes over to em units. Now users can increase the font size in the new IE browser.

My only issue is that not everything in the actually layout is being flexible. Everything below the navigation is flexible when the font size is increased through both browsers (IE, Firefox).

However, the header and the navigation text increase in size and break the layout.

How can I remedy this situation? Should I layout the top part (header & nav) differently?


Jan 2nd, 2007, 06:12 PM
You can use the overflow: auto declaration if you want to keep the box a fixed size; scroll‐bars will be provided on the element when content no longer fits. If the content is not that important, you can hide it instead when it gets too big using overflow: hidden. If you with to always offer scroll‐bars, overflow: scroll does that. If you only want to control scroll‐bars in one dimension, CSS3ís overflow-x and overflow-y properties are suitable for that, but the generic overflow property should also be provided for those browsers that havenít implemented that part of the CSS3 Box Model Module (draft) yet.

You can also simply not specify dimensions on those elements or make their dimensions relative (percentages, ems, exes, points). You can also make their dimensions semi‐relative using min-height and min-width so that they have a minimum size, but not a maximum size.

Jan 3rd, 2007, 12:09 AM
Thank you very much for your response, however I don't think it is exactly what I was looking for.

I would like it so that when the text in the header... like the phone number... is increased in size (when a user hits CTRL+ "+" with their browser) the nav and the rest of the page will get pushed down so the header text does not get overlap other page elements.

The overflow would be good if I wanted to keep the div tags housing the text to stay the same size... but I am looking for something a little different.


Jan 3rd, 2007, 12:42 AM
Like Arbitrator says, you should then specify your div size etc using em unit. Example:

div#flexible {
width: 30em;
height: 10em;

div#not_flexible {
width: 300px;
height: 100px;

How should your wrapper behave under CTRL+"+" ? If you want the whole page to be flexible you must also have a flexible wrapper with the width specified using the em unit.

In short, there must not be a single statement involving the px unit.

Jan 3rd, 2007, 01:25 AM
You can use absolute units with the min-height property I mentioned. Itís too bad Internet Explorer 6 doesnít support it though. You will still need to account for horizontal expansion though, which probably means the overflow property if you want a semi‐fixed layout.

Jan 3rd, 2007, 03:39 PM
Thanks for explaining it further guys. I really appreciate your help!