float layout and floating images

Hey, I made a simple css layout with 3 columns (sidebars and content) using float. Then, I have some images in the content column with text wrapped around them. The problem is that I want to clear the text wrapping but when i do it with clear:both, the next element is under the sidebars, not only under the image.
So, my question is: How can I wrap text around images in such a layout with the ability to clear the wrap?

Here is the problem demonstrated.


<style type='text/css' media='all'>
#content{
 margin:0 160;
 background-color: 00ff00;
}

#main{
 padding:0;
 margin:0 auto 0 auto;
 width:850px; 
}

#left{
 height: 400; 
 width:160px; 
 background-color: ffff00; 
 float:left; 
} 

#right{
 height: 400; 
 width:160px; 
 background-color: 0000ff; 
 float:right; 
}

.alignleft {
float: left; 
}

.clear{
 clear: both; 
} 
</style>

<div id="main">
 <div id="left">
  sidebar contents
 </div>
 <div id="right">
  sidebar contents
 </div>
 <div id="content">
  <p><img src="http://www.vlysy.cz/img/square.gif" class="alignleft" /> some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text</p>
  <div class="clear"></div>
  i want this text to display under the image, not under the sidebar
 </div>
</div>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="language" content="english"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <style type="text/css"> #main { width:850px; border:1px solid #999; margin:auto; overflow:hidden; } #left,#right { float:left; width:140px; height:380px; padding:10px; background-color:#ffe; } #content{ float:left; width:510px; padding:10px; background-color:#efe; } #right{ background-color:#eef; } #alignleft { float:left; width:50px; height:50px; margin-right:10px; background-color:#edaf0f; } </style> </head> <body> <div id="main"> <div id="left">sidebar contents</div> <div id="content"> <p> <img id="alignleft" src="http://www.vlysy.cz/img/square.gif" alt=""> some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text some wrapped text </p><p> I want this text to display under the image, not under the sidebar </p> </div> <div id="right">sidebar contents</div> </div> </body> </html>

float layout and floating images

Tommassino

birdbrain

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week