CSS Fill remaining width space

Question

I have a problem on making CSS to fill remaining width space. I've tried so many other answers in stackoverflow and the same problem occur, the div keeps on breaking into a new line. Here's my code:

http://jsfiddle.net/YSLJX/

I've tried these but nothing works...

width: 100%
width: available
width: auto

Answer 1

You can simplify your html, float the image element left (u_img) then apply overflow hidden to the second element (u_msg), this will 'tell' it to apply block level behaviour and stretch to the remaining space.

Demo Fiddle

HTML

<div id="chat" style="height: 350px;">
    <div class="u_img">
        <img src="https://lh3.googleusercontent.com/-g_zvhql17tw/AAAAAAAAAAI/AAAAAAAAARE/xQMDsE3q_K0/w48-c-h48/photo.jpg&quot;" />
    </div>
    <div class="u_msg"><span class="post_time">Tue May  6 13:52:34 2014</span><span class="u_name"><b>Qixster</b>:</span><span id="msg_container" style="color: #000;font-size: 16px;">test</span>
    </div>
</div>

CSS

#chat {
    width: 100%;
    height: 100%;
    overflow:hidden;
    border: 1px solid #c0c0c0
}
.msg {
    border: 1px solid #c0c0c0;
    min-height: -moz-fit-content;
    min-height: -webkit-fit-content;
    min-height: fit-content;
}
.u_img {
    float: left;
    max-height: 48px;
}
.u_msg {
    padding-left: 5px;
    font-family:'Ubuntu', sans-serif;
    word-wrap: break-word;
    overflow:hidden;
}
.u_name {
    float: left;
}
.post_time {
    float:right;
    right:0px;
    color:#c0c0c0;
    font-size:10px;
}

The alternative would be to apply a display:table structure