CODEWITHSUNDEEP
csshtml
Kaj
Kaj

Reputation: 2503

Align div right of floating div

I have the 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 />
            This is a sample text to test my post-layout's divs
            <br />
            Some text...<br />
            Some text...<br />
            Some text...<br />
            Some text...<br />
            Some text...<br />
            Some text...<br />
            As you can see untill here it's all going fine but:.<br /><br />
            Here the text starts completely at the left..<br />
            But it shouldn't..<br />
            It should start at the same place as above.. Right from the div where the avatar is...<br />
            blabla<br />
       </div>
        <div class="postersignature">
        This signature should stay at the completely bottom of the postwrapper and should also be start at the right of the avatar div
    </div>
</div>

</body>

With this 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 now the text in de postcontent starts at the completely left of the div (below the posterinfo div that's floated to the left) but I want to prevent it from going below the image if the text is too long to fit aside it.

I've illustrated this here: http://jsfiddle.net/BsftM/

How can I accomplish this?

Upvotes: 0

Views: 117

Answers (3)

pxx
pxx

Reputation: 21

Put:

 float: left

also to the divs "postcontent" and "postersignature".

And if you want "postersignature" to the right will needs a marginleft equal to distance "postcontent" have respect to posterinfo.

But the best solution (if you want evertything aligned) is to put postcontent and postersignature inside a new div "postnew" and put this new one with "float: left" too.

<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="postnew">
        <div class="postcontent">
            Hi there everyone!<br /><br />
            This is a sample text to test my post-layout's divs
            <br />
            Some text...<br />
            Some text...<br />
            Some text...<br />
            Some text...<br />
            Some text...<br />
            Some text...<br />
            As you can see untill here it's all going fine but:.<br /><br />
            Here the text starts completely at the left..<br />
            But it shouldn't..<br />
            It should start at the same place as above.. Right from the div where the avatar is...<br />
            blabla<br />
       </div>
        <div class="postersignature">
        This signature should stay at the completely bottom of the postwrapper and should also be start at the right of the avatar div
         </div>
     </div>
   </div>

 </body>

And for the 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;
   bottom:0;
   background: #442222;
   word-wrap: break-word;
   margin-top:10px;
 }
 .postnew {
   float: left;
 }

Upvotes: 0

hazzik
hazzik

Reputation: 13344

Add following styles:

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

http://jsfiddle.net/BsftM/5/

Upvotes: 2

wazaminator
wazaminator

Reputation: 245

if you know the size of the image, you can use pading-left : (size of the image)px

otherwise, you can put your image in a div, and make that div longer, so that text won't go below

Upvotes: 0

Related Questions