Solved

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

Posted on 2006-11-30
3
533 Views
Last Modified: 2008-01-09
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
Comment
Question by:kraffay
  • 2
3 Comments
 
LVL 30

Accepted Solution

by:
Steggs earned 125 total points
ID: 18047266
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
 
LVL 9

Author Comment

by:kraffay
ID: 18047521
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
 
LVL 30

Expert Comment

by:Steggs
ID: 18047893
The text has to come after the float mate
0

Featured Post

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question