css - Align div right of floating div -


i have following html:

<body>     <div id="postwrapper">         <div class="posterinfo">            username<br />             <img src="http://board.ogame.nl/wcf/images/avatars/avatar-3778.gif"             alt="avatar" /><br />             postcount         </div>         <div class="postcontent">             hi there everyone!<br /><br />             sample text test post-layout's divs             <br />             text...<br />             text...<br />             text...<br />             text...<br />             text...<br />             text...<br />             can see untill here it's going fine but:.<br /><br />             here text starts @ left..<br />             shouldn't..<br />             should start @ same place above.. right div avatar is...<br />             blabla<br />        </div>         <div class="postersignature">         signature should stay @ bottom of postwrapper , should start @ right of avatar div     </div> </div>  </body> 

with css:

html,body {margin:0;padding:0;height:100%;} #postwrapper {     width:100%;     height:auto; } .posterinfo {     float:left;     height: auto;     margin-right:10px;     background: #222222; } .postcontent {     margin-top:10px;     margin-bottom: 0px;     height: 100%;     background: #333333;     word-wrap: break-word; } .postersignature {     height:auto;     width: 100%;     margin-bottom: 0;      bottom:0;     background: #442222; } 

but text in de postcontent starts @ left of div (below posterinfo div that's floated left) want prevent going below image if text long fit aside it.

i've illustrated here: http://jsfiddle.net/bsftm/

how can accomplish this?

add following styles:

.postcontent { float: left; } .postersignature { clear: both; } 

http://jsfiddle.net/bsftm/5/


Comments

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -