Re: CSS columns

When you ask questions like this, it saves time and confusion if you
say specifically what behavior you expected, rather than leaving us
to guess. It also helps to say that you have validated your HTML and
your CSS (if you have).

Good point - the expected behavior is to have two equal-width columns of
text, the right-hand one with a gray background.

One thing you're doing wrong is specifying width in pixels. A second
is _not_ specifying a width for div a.

Why is it wrong to specify widths in pixels? What would be a more correct
method of achieving the desired effect? Shouldn't div a inheret the
specified width from the 'div' selector?

I'm guessing that my copy of Moz 1.4 decides that after displaying
div a there's not room to display div b next to it within that 300-
pixel total.

I've modified the code so that it only uses 100px for each div. This should
give plenty of room to accomodate the width of both divs side-by-side.


Thanks,
-Dan

Dan Phiffer wrote:

One thing you're doing wrong is specifying width in pixels. A second
is _not_ specifying a width for div a.

Why is it wrong to specify widths in pixels?

Is isn't as such. But by using em/ex units elements can resize to cope with
changes in the users font size, and by using % units elements can resize to
adjust to the window size.

See http://dorward.me.uk/tmp/px.png

--
David Dorward http://dorward.me.uk/

In article <ebj0b.818$xD6.676 (AT) newsread3 (DOT) news.pas.earthlink.net> in
comp.infosystems.www.authoring.stylesheets, Dan Phiffer
<danAT (AT) phifferDOT (DOT) com> wrote:

Shouldn't div a inheret the
specified width from the 'div' selector?

Yes, of course (though "inherit" isn't quite the right word).

As I said, specifying a width for the containing div but not the
contained divs is almost certainly your problem. Let me be a little
less Delphic and explain:

A div with no specified width or margins grows to contain its
content (!), being limited only by the size of the block that
contains it. So the floated div, since it has lots of content, grows
as wide as necessary to contain that content, within your (ill-
advised) pixel width for the containing div. That leaves no room for
the non-floated div, which flows "around" the floated div, just as
it's supposed to.

If you specify a width or max-width for the floated div, it should
display as you wish -- on _your_ monitor, with _your_ font choice,
screen size, window size, and so forth. Your pixel specification
guarantees that the display will be bad for a huge number of people.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
validator: http://jigsaw.w3.org/css-validator/