CSS Forum

**NateL** · 07-17-2007, 01:04 AM

What would be the best way to convert this code to CSS:

HTML Code:

<table width="100%" border="0">
  <tr>
    <td width="50%">image goes here</td>
    <td width="50%">description goes here</td>
  </tr>
</table>

Two columns...left column contains a picture, right column contains a description.

**Angelosanto** · 07-17-2007, 11:26 AM

It depends - if this is one out of a whole load of images with descriptions, then an unordered list would be best. If its just the one, then divs would be better

**crandall87** · 07-19-2007, 07:09 AM

Replace width="100%" border="0" with style="width:100%;border:none;"

**angele803** · 07-19-2007, 11:58 AM

You could use definition lists for this.

Code:

<dl>
<dt>image goes here</dt>
<dd>Description goes here</dd>
</dl>

Then your CSS could look something like this

Code:

dt {
    width:50%;
    float: left;
    }

dd {
     width:50%;
     }

**xprmnt** · 07-19-2007, 01:06 PM

it could be done lots of different ways depending on the rest of the page layout but here is a start

Quote:

<html>
<head>
<style type="text/css">
div#ourdiv div {width:50%;display:inline;}
</style>
</head>
<body>
<div id="ourdiv">
<div>image goes here</div>
<span>description goes here</span>
</div>
</body>
</html>

**LadynRed** · 07-19-2007, 04:10 PM

I would drop the useless <span> though. Description should be in a <p></p> tag and then you can style the <p> itself. Saves adding repetitive spans all over the place.

**xprmnt** · 07-20-2007, 08:43 AM

Yes LadyNred droping the span would probably work,
I was just trying to give a skeleton he/she could work with ...