How to contain a div floating outside of container div

Question

I'm making a 'topic' design, and I am having issues again. I have a floating div (to the left) inside a container div and it's going outside of it's boundries. It's dynamic, so setting a height: property will not suffice. Now I know it's the float: left; that's causing it, but how can I try fitting in it? I tried setting outer div to display: table; which works, but then it doesn't set the other div next to the floating one to fill the width.

enter image description here

html:

    <div class="reply-wrapper">
    <div class="reply-box">
        <div class="reply-header">
            <span id="post-id">#1</span>
            <span id="post-date">Today, 12:08</span>
        </div>
        <div class="reply-main">
            <div class="user-info">
                <div class="username-wrap">
                    <span id="username">Jakes625</span>
                    <!-- img online or not? -->
                </div>
                <span id="usertitle">Admin</span>
                <ul class="user-stats">
                    <li>Posts: 99</li>
                    <li>Rep: 99</li>
                    <li>Likes: 99</li>
                </ul>
            </div>
            <div class="reply-data">
                <div class="reply-post">
                    <h2>Post Title</h2>
                    <p>
                        So this is some text that goes in a post.
                    </p>
                </div>
                <div class="reply-signature">
                    This is an example signature.
                </div>
            </div>
        </div>
        <div class="reply-footer">
            <span class="reply-button">Reply With Quote</span>
        </div>
    </div>
</div>

css:

    .reply-wrapper{
    background-color: #DDD;
    border-radius: 6px;
    padding: 6px;
    font: normal 12px arial, helvetica, sans-serif;
    color: #333;
}
.reply-box{
    border: 1px solid #c6c6c6;
    border-radius: 4px;
    margin-bottom: 30px;
}
.reply-box:last-child{
    margin-bottom: 0;
}
.reply-header{
    background-color: #474747;
    border-bottom: 1px solid #c6c6c6;
    border-radius: 4px 4px 0 0;
    padding: 4px;
    color: #FFF;
}
.reply-header #post-id{
    float: right;
}
.reply-main{
    background-color: #ebebeb;
}
.reply-main .user-info{
    width: 180px;
    float: left;
    background-color: #e5e5e5;
    border-right: 1px solid #c6c6c6;
    padding: 10px;
}
.reply-main .reply-data{
    margin-left: 200px;
    margin-right: 0px;
}
.user-info .username-wrap,.user-info #usertitle{
    text-align: center;
    display: block;
    text-align: center;
}
.username-wrap #username{
    font-size: 11pt;
}
.user-stats{
    margin: 0;
    padding: 0;
    list-style-type: none;
    margin: 10px 0 10px 0;
}
.user-stats li{
    background: #f2f2f2 none;
    color: #3e3e3e;
    border: 1px solid #c6c6c6;
    margin-bottom: 3px;
    padding: 4px;
    line-height: 20px;
}
.reply-post{
    padding: 10px;
}
.reply-post h2{
    margin: 0;
    padding: 0;
    border-bottom: 1px solid black;
}
.reply-signature{
    border-top: 1px solid #c6c6c6;
    padding: 10px;
}
.reply-footer{
    padding: 4px;
    height: 15px;
    background-color: #d8d8d8;
    border-top: 1px solid #c6c6c6;
}
.reply-footer .reply-button{
    float: right;
}

PAGE SOURCE: http://jakes625.toomanylols.com/thread.html

score 2 · Accepted Answer · answered Oct 19 '13 at 22:55

2

change:

.reply-main .user-info{
    width: 180px;
    float: left;
    background-color: #e5e5e5;
    border-right: 1px solid #c6c6c6;
    padding: 10px;
}
.reply-main .reply-data{
    margin-left: 200px;
    margin-right: 0px;
}

to:

.reply-main .user-info{
    width: 180px;
    display: inline-block;
    background-color: #e5e5e5;
    border-right: 1px solid #c6c6c6;
    padding: 10px;
}
.reply-main .reply-data{
    margin-left: 200px;
    margin-right: 0px;
    display: inline-block;
}

This will display both divs side by side, while stretching the outer div to make them fit. If what you want is the contrary (make the div's height equal the outer div's height, regardless of it's content) then the other posted answer is what you're looking for

jsfiddle here

answered Oct 19 '13 at 22:55

Nicolas Straub

3,381
6
21
42

They have to be side by side :p, that puts userinfo on top – MysteryDev Oct 19 '13 at 22:58
http://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block (in case you're confusing inline with inline-block) =) – Nicolas Straub Oct 19 '13 at 23:00
you need to add `inline-block` to the .reply-data div too ;) – Nicolas Straub Oct 19 '13 at 23:09
I'm using your jsfiddle! :P maybe browser issue? I'm using chrome. – MysteryDev Oct 19 '13 at 23:13
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/39578/discussion-between-jakes625-and-nicolas-straub-valdivieso) – MysteryDev Oct 19 '13 at 23:21

score 0 · Answer 2 · answered Oct 19 '13 at 22:49

0

Overflow hidden the reply-wrapper part (the outter container)

CSS

.reply-wrapper {
  background-color: #DDDDDD;
  border-radius: 6px 6px 6px 6px;
  color: #333333;
  font: 12px arial,helvetica,sans-serif;
  padding: 6px;
  overflow: hidden;
}

or

.reply-main {
  background-color: #EBEBEB;
  overflow: hidden;
}

answered Oct 19 '13 at 22:49

Milche Patern

19,632
6
35
52

This works, although if the reply-data is bigger it looks weird. – MysteryDev Oct 19 '13 at 22:58
OK, i gave you a way to do it by setting overflow:hidden to outter container .. If you cannot figure out the rest of it and want a copy-paste solution for your specific needs : PAY ME. – Milche Patern Oct 19 '13 at 23:05
okay I'll pay. lol. Your way works, but not when the reply-data has a height greater than the height of the user-info. :p – MysteryDev Oct 19 '13 at 23:07
Do you have some way I could contact you? – MysteryDev Oct 19 '13 at 23:21
@Jakes625 No need to contact me, Nicolás Straub Valdivieso gave you the fix. – Milche Patern Oct 21 '13 at 13:43

How to contain a div floating outside of container div

2 Answers2