Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2006-11-30
3
Medium Priority
?
545 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:
Mark Steggles earned 500 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:Mark Steggles
ID: 18047893
The text has to come after the float mate
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses
Course of the Month12 days, 1 hour left to enroll

564 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