How can I have two columns (each row has text and image), with one DIV?

[ghurty]

How can I have two columns (each row has text and image), but with everything in the same DIV?

 

 

Thanks

[haku]

Here is an example:

 

HTML:

<div id="columns">
  <p>some text</p>
  <span><img src="img.jpg" alt="image" /></span>
  <p>some more text</p><span>
  <img src="another/img.jpg" alt="another image" /></span>
</div>

 

CSS:

#columns
{
  width: 1000px;
  margin: 0 auto;
  overflow:auto;
}

#columns p
{
  width:50%;
  float:left;
  clear:both;
}

#columns span
{
  width:50%;
  float:right;
}

 

You'll have to adjust the numbers depending on the size of your image and stuff. But this is a basic outline.

[arneman]

Or use a table with 2 columns?

[haku]

Columns shouldn't be used for layout purposes.