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..

    How do I make menu background even with the header in HTML/CSS

    How to change background Image sizing

    How to make simple_form input field wider with CSS?

    How to change textbox style in css

    How does css inheritance work exactly?

    How does one reduce the height of fontawesome text?

    How to get smooth Google fonts?

    JavaScript, AngularJS: How do I know if element is larger than its container?

    How to match a comment node with the Jsoup selector api?

    jQuery to hide and show divs with an indicator

    CSS - How to move an absolutely positioned item relatively to its current position

    HTML/CSS How to connect a list to h tag and word-spacing

    How do you make 2 YouTube videos automatically play one after the other?

    How can I draw such 2 lines in this shape using CSS HTML

    How to add html code into html?

    How to create a div in the same size as the contained image. Both should be responsive

    jquery show() not displaying properly for highcharts graph

    How can I remove the spacing above a block element in CSS?

    How to create animated border on hover

    How do I overlay a gradient (background) on top of a border?

    How can I make width flexible with CSS when using bootstrap's responsive design?

    How do I make my background-color fill entire width of div when applied to a `ul li`?

    How to create an animated rainbow line using CSS or Javascript?

    css: how to have a variable column size with text overflow ellipsis

    How do I add another css to Bootstrap?

    CSS - how to align text and an image vertically?

    HTML CSS, how to create a Side bar or column

    How to have different CSS for a class depending on both col-sm-6 and col-xs-12 in Twitter Bootstrap 3?

    How to place kartik typeahead above text input

    How can I turn a background visibility on and off with jQuery?