[thelist] [css] liquid design help, please

Joshua Olson joshua at waetech.com
Mon Aug 4 09:33:31 CDT 2003

Hello CSS gurus,

While I understand the preference to the CSS standards set down by w3.org,
one aspect of the standards has always caused me issues... the box model.
Here's my quandary:

Lets say I wanted to have a layout that had a 100% width div a single pixel
border and 1em margin on all sides.  Within that, two side-by-side divs
(single pixel borders) that extend the full height of the outer div
regardless of how much content is in either panel and are both exactly 50%
of the width.  Everything on the page should be spaced out by exactly 1em.

I've created a sample page as a "newbe" stab at this layout:


As you can see the right-hand panel is shoved below the left-hand panel.
This is obviously because the spec says that the width attribute will define
the width of the usable inner region, excluding the padding, border, and
margin.  Naturally, if I set the width to 50% and have a padding, border, or
margin the overall width will be greater than 50%.  Is it plausible to
calculate the width by saying "width: (50% - 2px - 0.5em)" or something?

With IE's broken box model this sort of layout was fairly easy... but, with
the real box model it seems almost impossible.  The rule of thumb seems to
be that you cannot really mix %, em, and px formatting rules easily

Is this correct?  If not, what tips could I employ to get the layout I am
looking for?


Joshua Olson
Web Application Engineer
WAE Tech Inc.

More information about the thelist mailing list