Solved

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

Posted on 2006-11-30
3
531 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

Complete VMware vSphere® ESX(i) & Hyper-V Backup

Capture your entire system, including the host, with patented disk imaging integrated with VMware VADP / Microsoft VSS and RCT. RTOs is as low as 15 seconds with Acronis Active Restore™. You can enjoy unlimited P2V/V2V migrations from any source (even from a different hypervisor)

Question has a verified solution.

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

Suggested Solutions

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

772 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