How to contain a div floating outside of container div


Tags: css,html,overflow

Problem :

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



Solution :

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


    CSS Howto..

    CSS, how to size an img back to its width attribute

    how to turn off the break word in css? [duplicate]

    How can I align the left edge of HTML form elements using CSS?

    How can you grab elements in dom and apply different css without id?

    How to prevent artifacts from appearing in Webkit when scrolling the page after stopping CSS animations

    How to rotate an image with CSS style transform by an variable of degree?

    How do I center this menu?

    How to determine if CSS has been loaded?

    How to deal with the hover issue of overlapped non-square DIV?

    How to load CSS filed inside the body in JSP?

    Responsive Design - how to get my image on left to take up whole screen

    How to automate background width in CSS

    How to get css 3 column layout with floats and no margins?

    How can I shift up a div and all divs that follow it?

    How to implement .SCSS on my own website? [closed]

    How to prevent CSS hover style from firing unless hover time reached as defined in jQuery routine?

    How to delete Bullets from an Unordered List using CSS?

    How to make fonts display on web cross-platform?

    How to set a different main content background for each page in weebly?

    How to make a jquery slider from scratch

    CSS: How to put form input fields and button next to each other in the same line?

    How to centre a table in html using css file? [duplicate]

    CSS and html: how to style input file in css (aline the text with the choose file button)?

    How to select text, but not images, in CSS

    How can I get list of all element css attributes with jQuery?

    How can we prevent that when I resize my window, my images move using HTML-CSS?

    How can I push the primefaces DefaultMenuModel before an accordion panel?

    How to inline the contents of an entire stylesheet with Wordpress?

    CSS: how to stop text from taking up more than 1 line?

    How can I hide a DIV without using CSS?