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

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

.

Relevant Pages

  • Re: Event Handling via CSS
    ... 'mouseover', 'mouseout' etc  attached to html elements. ... JavaScript event handlers via css for CSS attributes like "hover"? ... are HTML elements which don't have any event handlers directly ... your understanding of frameworks seems flabby. ...
    (comp.lang.javascript)
  • Re: browser incompabilities
    ... >>> images and then make images in the right sizes and upload the lot to a ... > There's also an error in your CSS: ... > the new order of html elements) see if it still goes wrong? ... As to the font property, I'm under the impression that it's a superclass of ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: Event Handling via CSS
    ... 'mouseover', 'mouseout' etc  attached to html elements. ... JavaScript event handlers via css for CSS attributes like "hover"? ... are HTML elements which don't have any event handlers directly ... Banned immediately for stating that jQuery uses browser sniffing. ...
    (comp.lang.javascript)
  • Re: Mapping presentational HTML to CSS: a summary
    ... HTML elements and attributes to CSS, and even no informal description (as ... the clearing div will start a new anonymous block nested inside the one ... about which block is the containing block for the second div. ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: beginning css: setting block widths for multi-browser compatability?
    ... I've been bashing away at the CSS ... 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 ...
    (comp.infosystems.www.authoring.stylesheets)
Loading