two divs inline, dynamic dimensions

Question

I want something to look like a typical forum post where some user info is on the left of the post and then the post itself. I used two divs wrapped around another div and then used float on css. My problem is that the other div, when floated as well, wants to stay to the left rather than be 'right next to' the other div. I've tried display:inline; on the div and also changing it to span instead. The closest thing I have is only the top part of the other div does in the right place(when I do not float this div, only the first one). Think a typical IPB post layout. If that doesn't make sense, here's my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<div id = "contentarea">
    <div class = "post">
        <div class = "head">
            <p class = "name">asrockw7</p>
        </div>
        <div class = "body">
            <p class = "title">On the Origin of Species</p>
            <p class = "content">Integer hendrerit lectus sit amet turpis facilisis quis lacinia nulla tempus. Aliquam vitae ante eu sem vestibulum scelerisque. Cras dui neque, auctor eget rhoncus non, pretium a justo. </p>
        </div>
        <div class = "clear">clear:both;</div>
        <div class = "allreplies">
            <div class = "reply">
                <p class = "name">Wafer</p>
                <p class = "content">Vestibulum nec turpis eu mi imperdiet porttitor. Fusce eget lorem libero, a imperdiet sem. Integer eleifend tincidunt condimentum. Nam id arcu nec lectus rhoncus sagittis.</p>
            </div>
            <div class = "reply">
                <p class = "name">Arondight</p>
                <p class = "content">Suspendisse non eros orci, a porttitor lacus. Donec vulputate viverra neque, quis sagittis eros suscipit vel.</p>
            </div>
        </div>
        <div class = "clear">clear:both;</div>
    </div>
</div>
</html>

<style type = "text/css">
.clear {
background:white;
clear:both;
}
#contentarea {
margin-top:50px;
margin-left:10px;
min-width:700px;
}
p{
font-family:"Lucida Console";
}
.post {
opacity:0.9;
background:blue;
padding:5px 10px 5px 10px;
}
.post .head {
background:red;
float:left;
}
.post .body {
background:green;
}

.post .allreplies {
background:yellow;
}
</style>

The colors are just to be able to distinguish each part from the other. I figured this is because the body div doesn't think it'll fit next to the head div, so it goes down. I could have specified an explicit width and height and make the body div know it can fit but it would be bad for people with large resolution monitors. At this point, I was just tempted to use <table>.

These are all generated by PHP, just wanted to get the layout right first.

tl;dr: Basically I want the head div and body div to be right next each other rather than having body div fall off because it doesn't think it fits.

an even better solution is something called _Block Formatting Context_: http://stackoverflow.com/questions/1260122/expand-div-to-take-remaining-width — lightburst, Aug 15 '12 at 12:13

score 1 · Accepted Answer · answered Aug 12 '12 at 08:51

You can add x% width to .head and (100-x)% width to .body. Also, you can add float:left to .body as you did before. See fiddle.

The way you have it right now, the .head element is taking up space on the top left, pushing the content in .body (which is not floated) to the right.

When you don't specify the width of a floated div, the .body div's width is the minimum of the width of the content inside the div and the width of the parent. In this case, the content's "width" is greater than the parent element's width, so the .body div gets pushed to its own horizontal line. If you just have float:left on both .head and .body, it works correctly if there isn't that much text in .content.

two divs inline, dynamic dimensions

1 Answers1