Re: CSS columns

On Tue, 19 Aug 2003 03:15:13 GMT, "Dan Phiffer" <danAT (AT) phifferDOT (DOT) com>
wrote:

I'm having trouble getting the following to display correctly in Mozilla
Phoenix 0.6 for Windows and Safari 1.0 for Mac. Recent versions of Internet
Explorer seem to do fine with the design on both platforms, but no dice on
the browsers I thought had good CSS support. I can only assume I'm doing
something wrong here:

http://osp.claremont.edu/~dan/temp/css-cols/test.html

OK, it took me a while to work this one out as well. IE is getting it
wrong as usual.

I suggest you first do the following:
- reduce the amount of text in each div
- add 'width: 150px' to your div b
- and add different colour (sorry, color) borders to your divs.
Then you can probably understand what is happening.

To fix it, either add a left margin to div b which is wide enough to
accommodate div a, or add float: left to div b.

And, as already pointed out, better to use % or em for the widths,
though that's not the cause of this problem.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Excellent, that did it.

The problem, for those who might have been curious, was that in order to put
two columns next to each other _both_ divs have to be floated left - for
some reason I thought just the left one had to be.

Thanks for the help!
-Dan


"Stephen Poley" <sbpoley (AT) xs4all (DOT) nl> wrote

On Tue, 19 Aug 2003 03:15:13 GMT, "Dan Phiffer" <danAT (AT) phifferDOT (DOT) com
wrote:

I'm having trouble getting the following to display correctly in Mozilla
Phoenix 0.6 for Windows and Safari 1.0 for Mac. Recent versions of
Internet
Explorer seem to do fine with the design on both platforms, but no dice
on
the browsers I thought had good CSS support. I can only assume I'm doing
something wrong here:

http://osp.claremont.edu/~dan/temp/css-cols/test.html

OK, it took me a while to work this one out as well. IE is getting it
wrong as usual.

I suggest you first do the following:
- reduce the amount of text in each div
- add 'width: 150px' to your div b
- and add different colour (sorry, color) borders to your divs.
Then you can probably understand what is happening.

To fix it, either add a left margin to div b which is wide enough to
accommodate div a, or add float: left to div b.

And, as already pointed out, better to use % or em for the widths,
though that's not the cause of this problem.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

In article <4ms0b.62$lw4.54 (AT) newsread3 (DOT) news.pas.earthlink.net> in
comp.infosystems.www.authoring.stylesheets, Dan Phiffer
<danAT (AT) phifferDOT (DOT) com> wrote:

The problem, for those who might have been curious, was that in order to put
two columns next to each other _both_ divs have to be floated left

That's not true, and I don't think it's what Stephen said. It
may be the best way to accomplish the task in some instances, but it
is emphatically not the only way. In some instances it's not even
the best way.

Please don't post upside down; please do trim your quotes; and if
you send e-mail copies of your follow-ups (which is usually not
necessary), please identify them as such and please use a valid
return address.

--
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/

In article <4ms0b.62$lw4.54 (AT) newsread3 (DOT) news.pas.earthlink.net> in
comp.infosystems.www.authoring.stylesheets, Dan Phiffer
<danAT (AT) phifferDOT (DOT) com> wrote:

Excellent, that did it.

The problem, for those who might have been curious, was that in order to put
two columns next to each other _both_ divs have to be floated left - for
some reason I thought just the left one had to be.

Thanks for the help!
-Dan

Dan, PLEASE do not send e-mail with a bogus return address. I don't
know how to make it plainer. You have done this twice now, that I
know of.

--
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/