Re: Problem with CSS layout

by "Bert" <bert(at)betterwebdesign.com.au>

 Date:  Tue, 11 Jun 2002 08:27:33 +0800
 To:  <r.bhaskar(at)compserv.gla.ac.uk>
 Cc:  <hwg-basics(at)hwg.org>
 References:  localhost
  todo: View Thread, Original
Hi Raj

> I didn't get an answer to this first time around, (and Paul's suggestion
to make all the thumbnails
> the same size is no good since they're being generated dynamically) so I
thought that I'd try again.

If you specify an appropriate width and height in your "float" class, the
images line up (at least. in MSIE6 and Netscape 6.2).  The height is the
key.  In my quick test, a height of 175px did the job.  All boxes end up the
same height and there's no gaps.

You could perhaps go lower than that if the boxes didn't have a <.br> tag
followed by a <.p> for the images.

Of course, whatever height you choose must be able to accommodate the
tallest image (in this case "sm_audience14.jpg").  Opera6 seems to want even
taller boxes - it put the text for no.14 below the box. However, there were
no gaps, when using the setup shown below.

div.float {
    float: left;
    background-color: #ccc;
    color: #000;
    border: 1px dashed #000;
    margin: 10px;
    width:150px;
    height: 175px;
}


HTH
--
Bert Doorn, Web Developer
CIW Associate, IWA Member
www.betterwebdesign.com.au
Fast Loading, User Friendly Websites

.

HTML: hwg-basics mailing list archives, maintained by Webmasters @ IWA