[thelist] css image and text question

Brian Cummiskey brian at hondaswap.com
Wed Jun 20 23:45:19 CDT 2007


Meredith Tupper wrote:
> File under 'dumb css question #241':
> I am trying to avoid use of tables, and I cannot figure out how to 
> align a block of text next to an image, as you would with tables. 
> I'm trying to do an About Us page with headshots and want to fit the 
> text next to each headshot (all headshots are the same width) but I 
> can't get a satisfactory result in css.  Any help would be 
> gratefully accepted.
>
> Thanks,
> Meredith
>
>   
"as you would with tables" is pretty much open to anything.....    

if you are after this:


XXXXXXXXXXXX   yyyyyyyyyyyyyyyy
XXXXXXXXXXXX   yyyyyyyyyyyyyyy
XXXXXXXXXXXX   yyyyyyyyyyyyyyyyy
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

where X is the image and y is the text, a simple float will work :)

<div id="aboutus">
<img src="" />
<p>your text</p>

and throw this in your CSS:

#aboutus img { float: left; padding: 0 .5em .5em 0; }


Note, if your text isn't long enough to wrap the image, you may need to 
add a clearing element (to clear the float) 
see:  http://www.positioniseverything.net/easyclearing.html




More information about the thelist mailing list