Mixing relative and absolute width values for containers

General query here… I was just wondering if it’s a bad idea to have the width of the core layout containers to vary in type? I.e. some are defined in absolute pixels and others in relative percentage values.

It depends :). Having a fixed width container and then having percentage childs (aka 800px parent. 50% left and 50% right column width floats. That wouldn’t be bad (ignoring rounding errors there)

But If you had a 80% width container, and then specified px width columns, aka 2 of them 400px (800px total) then if the 80% width container is smaller then 800px then a column would drop :). Generally it isn’t that bad of an idea on spots of a page :slight_smile:

I was just wondering if it’s a bad idea to have the width of the core layout containers to vary in type?
Hi,
Assuming that your main wrapping div is set as a percentage width would really be the only condition when percentage widths would be effective on the child divs to keep them in relation to the wrapper’s width.

Yes, you could set two divs at 50% wide in a wrapping div that was 800px but they are not going to change so they may as well have been 400px to begin with. However I don’t think that is what you are asking.

In a situation where you have a percentage width set on the wrapper and then defined pixel widths set on two sidebars for example that can be done without causing any problems too.

Here is an Example where the main center content is given the flexibility to fill the available space between the sidebars.
The layout is confined to min-max widths so it keeps it usable without the fixed width sidebars ever sitting right beside each other.

Bottom line is that you need to control it someway so the layout does not break when the space gets limited. :wink:

Thanks a lot guys for the input. Insightful read and I’ll definitely be taking everything recommended here into consideration.