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