Forum Moderators: not2easy

Message Too Old, No Replies

Wrapping text around a DIV box.

DIV box text wrapping

         

islandjordan

9:34 pm on Oct 26, 2003 (gmt 0)



So my site is table based <Eeek!>. In the main content cell, I would like to include a small box (DIV) over on the right where I can list some links, or updates, or whatever. For some reason, I cannot get text that appears in the main content cell to wrap around this DIV box, though.

Can anyone see what I am doing wrong?

Here is the HTML for that part. The first TD is for the main content cell of the main table. The DIV is for the floating info box; the second table is inside the box to give it a header and a content section.

...<td width="581" id="maintable_content">
<div id="rightfloat">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="floathead"><p>News Updates:</p> </td>
</tr>
<tr>
<td>News goes here.</td>
</tr>
</table>
</div>
Main content text goes here. This should wrap around the div box. BUT IT DOESN'T!
</td>...

Here, now, is the CSS for these the IDs invovled:

#maintable_content {
vertical-align: top;
width: 100%;
margin: 0px;
padding: 20px;
}
#rightfloat {
border: 1px solid #999999;
top: 130px;
position: absolute;
height: 200px;
width: 150px;
right: 50px;
left: auto;
float: right;
clear: right;
}
#rightfloat table {
height: 100%;
width: 100%;
}
#floathead {
background-color: #FFCC99;
height: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999999;
padding-top: 00px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}
#rightfloat td {
vertical-align: top;
}

Can anyone see what I'm missing? I edit using DW MX 2004, but I am familiar with editing the actual HTML and CSS, so don't be afraid to get non-GUI on me. The effect I'm looking for can be seen on most news sites like CNN and MSNBC. You know how they insert a box with a poll right in the middle of the news column? And the text from the column wraps around it? That's what I want.

Thanks so much for the help!

[edited by: Nick_W at 9:38 pm (utc) on Oct. 26, 2003]
[edit reason] no personal urls please / thanks! [/edit]

Nick_W

9:51 pm on Oct 26, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi, welcome to the CSS Forum [webmasterworld.com] and WebmasterWorld!

Positioning and floating don't mix. When you absolutely postion somthing you take it out of the normal flow of the document.

Try taking out the positioning and you'll be on the right track ;)

Nick