• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 550
  • Last Modified:

How can I emulate a 2-Col table with DIV using CSS?

I am blogging on blogger and I want to mix in images with my text.  Normally I would make a 2-column table, with the first cell containing my text, and the next cell containing my image.  I got set valign=top and all would be good.

<table>
  <tr>
     <td valign=top>
          yadayadayada
     </td>
     <td valign=top>
         <img src="yada.gif">
    </td>
  </tr>
</table>

When I do this on blogger, I get a huge gap above and blow the table.  I want the text to flow nicely and render the image in the righthand column, and I think that I can only do this with 2 div's and some position or flow attributes.  Can someone give the proper markup to achieve this without using tables?
0
kraffay
Asked:
kraffay
  • 2
1 Solution
 
Mark StegglesWeb DeveloperCommented:
Greetings kraffay,

<div>
<img src="yada.gif" style="float:right;margin:0 0 0 10px;"></img>
yadayadayada
<span style="clear:right;font-size:1px;">&nbsp;</span>
</div>

The span is used to clear the float incase the text is less than the height of the img

Regards
0
 
kraffayAuthor Commented:
Steggs,

Thanks for the prompt response.  I tried this on my blog and can't seem to get the text to flow on the left side of the image (I was hoping for a 50/50 split).  You can see the results at:

http://integrityconsulting.net/blog/2006/11/how-not-to-do-ajax.html

My markup looks like this:

<div>This measly ....
<img src="http://media.doitbest.com/products/623917.gif" style="float:right;margin:0 0 0 10px;"></img>
<span style="clear:right;font-size:1px;">&nbsp;</span>
</div>

Any ideas?
0
 
Mark StegglesWeb DeveloperCommented:
The text has to come after the float mate
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now