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; }
Comments
Post a Comment