[thelist] Replicating a two column table with CSS

Joshua Olson joshua at waetech.com
Fri Mar 12 13:26:23 CST 2004


> -----Original Message-----
> From: Mike Cordeiro
> Sent: Friday, March 12, 2004 3:07 PM

> I have a thumbnnail image on the left and would like a block of text to
> appear to the right of that image and have the left side of the text be
> nicely aligned. If I were to build this using a table this is what I
> would do:
>
>
> I initially tried wrapping the image and text in their own classes each
> floated left. This created the desired effect in IE, but not in Mozilla,
> which displays the block of text beneath the thumb. This obviously tells
> me that my CSS is wrong. I've tried a variety of different solutions and
> searched google all to no avail.

Mike,

Floating both divs is one way to tackle the problem.  Typically, when it
renders as expected in IE but not in Mozilla, that means that you have made
the elements' total width wider than 100% of the containing box.  Remember,
Mozilla uses the standard box model and IE (unless you put in all the
correct html elements on IE 6) will be in quirks mode.

The rule of thumb is this... never EVER apply a set width on a div that also
has any of margin, padding, or border.  While you can technically do it and
get it right in some cases, it's a whole lot easier if you don't.  Since
padding is important for presentation, try this... set up the skeleton divs
using just the width css and the float.  Then, within these divs put more
divs that give you the margin, padding, and border, but DO NOT set any width
to these... let them naturally fill the containers.

Example:

<div id="div1" style="float: left; width: 25%">
  <div style="border: solid 1px black: padding: 10px">My stuff</div>
</div>
<div id="div2" style="float: left; width: 75%">
  <div style="border: solid 1px black: padding: 10px">My stuff2</div>
</div>

Best of luck,

<><><><><><><><><><>
Joshua Olson
Web Application Engineer
WAE Tech Inc.
http://www.waetech.com/service_areas/
706.210.0168




More information about the thelist mailing list