beginning css: setting block widths for multi-browser compatability?

[saxm-un]

Hi, I'm just beginning CSS based web development and although I've been
bashing away at it since yesterday, I'm still stuck with positioning
things on pages.

I'm trying to make (in table-speak) two (or possibly more later) rows
each of three columns, with a table width 60% of the width of the
screen with a 10% left hand margin. I've been bashing away at the CSS
for a while now, and I'm almost there (except I can't get the top-edge
of the elements in each row to line up properly), but my main problem
is that as soon as I resize the fonts in my web-browser, the HTML
elements can start breaking out of the CSS boxes - and then HTML
elements start overlapping other HTML elements.

For example, here is what I've got so far:
http://www.dingnet.org.uk/~saxm/css_problem/p1.html

and the CSS is at:
http://www.dingnet.org.uk/~saxm/css_problem/p1.css

If you try increasing font sizes, you'll see the problem.

I really want the CSS boxes to be the same size as the HTML elements
they enclose, except in the case of column widths, where the columns
should be the same width as the largest HTML element in that column.
Does anyone have any tips on how I could go about doing this?

Cheers,

Steve

[Neredbojias]

To further the education of mankind, sa*****@dingnet .org.uk vouchsafed:

Hi, I'm just beginning CSS based web development and although I've been
bashing away at it since yesterday, I'm still stuck with positioning
things on pages.

I'm trying to make (in table-speak) two (or possibly more later) rows
each of three columns, with a table width 60% of the width of the
screen with a 10% left hand margin. I've been bashing away at the CSS
for a while now, and I'm almost there (except I can't get the top-edge
of the elements in each row to line up properly), but my main problem
is that as soon as I resize the fonts in my web-browser, the HTML
elements can start breaking out of the CSS boxes - and then HTML
elements start overlapping other HTML elements.

For example, here is what I've got so far:
http://www.dingnet.org.uk/~saxm/css_problem/p1.html

and the CSS is at:
http://www.dingnet.org.uk/~saxm/css_problem/p1.css

If you try increasing font sizes, you'll see the problem.

I really want the CSS boxes to be the same size as the HTML elements
they enclose, except in the case of column widths, where the columns
should be the same width as the largest HTML element in that column.
Does anyone have any tips on how I could go about doing this?

If you really need a table-layout, use a table.

If what you meant in the last paragraph is something like '...the columns
should be the same width as the largest of the columnar content widths',
this can be accomplished by determining the width in em of said content and
applying it to all relevant containers.

--
Neredbojias
Infinity has its limits.

[Jim Moe]

sa*****@dingnet .org.uk wrote:

I'm trying to make (in table-speak) two (or possibly more later) rows
each of three columns, with a table width 60% of the width of the
screen with a 10% left hand margin. I've been bashing away at the CSS
for a while now, and I'm almost there (except I can't get the top-edge
of the elements in each row to line up properly), but my main problem
is that as soon as I resize the fonts in my web-browser, the HTML
elements can start breaking out of the CSS boxes - and then HTML
elements start overlapping other HTML elements.
Search for "two column css". You get lots of links.
If you try increasing font sizes, you'll see the problem.

I really want the CSS boxes to be the same size as the HTML elements
they enclose, except in the case of column widths, where the columns
should be the same width as the largest HTML element in that column.
Does anyone have any tips on how I could go about doing this?

Use ems for width specification, not %. That way the dimensions adapt to
the font size.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)