format without tables

[Guest alforddm]

I'm trying to implement layout without using tables but i'm having problems. I've scoured the web without having much success. The web site currently has this format <TABLE WIDTH="100%"> <TR> <TD><IMG SRC="cotton1.jpg" ALT="Cotton on Fire"></TD> <TD ALIGN="center"> <H3>Cotton On Fire</H3>2003 Cremello Filly <BR> Out of <A HREF="reference sires.php#dandy" TARGET="_blank">Legacies Dandy</A> and <A HREF="mares.php#fire" TARGET="_blank">Golden Fire Bar</A> <BR> <A HREF="http://dipperaranch.com/gallery/cotton">More Pictures</A> </TD> </TR></table> but with more rows. I've tried img.middle {verticle-align: middle} in my .css file but from what i can tell that only works on the first line for example i'd have to do something like <h3><img src="cotton1.jpg" class="middle" alt=""> Cotton on Fire</h3> but if i put a break and try to add more text it puts it back at the bottom of the img. Does anyone know how to do this or am i stuck with tables? Thanks, Daylene

[shannonlasell]

you should first creat <div> tags for each table data cell then using the-> position: (absolute/relative); top/bottom: #px/%; left/right: #px/&; <-- to place everything the way you want it. Your main problem is going to be centering the <div> tags. You will ok using properties -> align="left/center/right" <- you will want your image in one <div> tag and everything else in another <div> tag. Now it looks like you will want to use the float properties using css to make your image on the left and your content on the right.try something like this:---------------------------html-----<div id="left"> <img src='name.gif' ...........</div><div id="right"> text images more text or whatever</div>------------------------css---#left { }#right { float:left; // This will make your second div tag flush up to your first div tag.}---------------keep on reading your CSS bible and try google sometimes, but W3schools usually will have an answer for you somewhere in their tutorials. hope that gets you started.