[thelist] CSS: layout question

shawn allen shawn at alterior.net
Wed Nov 20 18:37:01 CST 2002


quoth Chris W. Parker:
> the problem with this css solution (as opposed to the table i wrote)
> is that you can use percentages as widths (which is great) but you
> cannot also keep the boxes a fixed width apart. at least, i can't
> figure out how. i tried margin-right: 5px; and padding-right: 5px; but
> those either affect the inside of their div or the content of the
> adjacent div.

If consistent spacing is *that* important, you could always use nested
containing blocks. Just position the outer elements, and style the inner
ones with padding, borders, and margins. In your case, each of your
inner blocks would have a margin-right of 5px. This also frees you from
having to use CSS parsing hacks to change widths in flawed box-model
browsers like IE5/win.

Another solution involves combining percentage widths, positioning, and
negative margins... But you'll need to rely on CSS parsing hacks for
that to work at all. And some browsers will render with annoying 1-2px
variations based on window size, the phase of the moon, etc. Better to
just wait for the CSS3 Columns module. :)

> if i adjust the width of the menu to be less than 25%, say 24%, i get
> a space, but that space is 1% wide. but that's not what i want, what i
> want is 5px.
>
> would it be possible to make a spacer div that would sit in between
> the menu div and content div but had a fixed width? (or is that evil?)

No, not unless you're floating all your columns (which is yet another
solution that I've seen implemented before, but it ain't pretty).

--
shawn allen
  mailto://shawn@alterior.net
  phone://415.577.3961
  http://alterior.net
  aim://shawnpallen




More information about the thelist mailing list