How to place two divs side by side where one sized to fit and other takes up remaining space?

This should be easy... why is this not easy?

I am looking to have 2 divs side by side, where one div will auto size to the content inside and the second div will simply fill the remaining width. I need the text in the 'remaining width' div to be truncated if it is too large though, as I can only have these divs occupy one line.

I have been searching all day and the closest I found was this post which suggested using tables that STILL didn't fix the issue.

Here is the jsfiddle code that reproduces my issue: http://jsfiddle.net/ssawchenko/gMxWc/

I am hoping that one of you stack-peeps can help me out!

=== CSS (Hacky) Solution? ===

Apparently adding a negative margin (that must guarantee to be big enough to cover the right size) will "work". This seems so hacky and may not fix the issue completely though. If I drag the jsfiddle window side to side to shrink and grow the divs, some oddities occur where the shrink-to text seems to float not on the complete right.

.right_part 
{
  margin-left:-1000px; 
  background:yellow;   
  float:right;
  white-space:nowrap;
}

=== Complete CSS Solution ===

FINALLY found the right CSS combination!

http://jsfiddle.net/ssawchenko/gKnuY/

My mistake was I was incorrectly floating my "fit to" content. By moving the div to the correct location in the DOM the content is floated correctly, and the "remaining sized" div will now correctly take up the remaining space.

I also wanted to force the divs to occupy ONE line, which is why I have set such strict CSS on the "remaining sized" div content. overflow:hidden; text-overflow:ellipsis;

ssawchenko

#full_width_div {
    background-color:#5B8587;
    width:100%;
}
.left_part {
    background:red;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.right_part {
   background:yellow;   
   float:right;
   white-space:nowrap;
}

<div id="full_width_div">
  <div class="right_part">
     Size to fit me completely
  </div>
  <div class="left_part">
     I am long and should be truncated once I meet up with the size to me text.
  </div>    

  <div style="clear:both;" />
</div>

I also wanted to force the divs to occupy ONE line, which is why I have set such strict CSS on the "remaining sized" div content. overflow:hidden; text-overflow:ellipsis;

This should work for you buddy.

<html>
<head>
<style>
#full_width_div, #full_width_div table {
    background-color:#5B8587;
    width:100%;
    max-height: 20px;
    overflow: hidden;
}

.left_part {
    background:red;
    width: 100%;
    overflow:hidden;
}
.right_part {
   background:yellow;  
   white-space:nowrap;
   verticle-align: top;
}
</style>
</head>
<body>
<div id="full_width_div">
    <table>
        <tr>
            <td class="left_part" valign="top">I am long and should be truncated once I meet up with the size to me text.</td>
            <td class="right_part" valign="top">Size to fit me completely</td>
        </tr>
    </table>
</div>
</body>
</html>

Your working jsfiddle --> http://jsfiddle.net/gMxWc/68/

you can use jQuery and code like this:

$(document).ready(function() {
    redraw();
});

$(window).resize(function() {
    redraw();
});

function redraw()
{
    var full_width = $('body').width();
    var left_width = $('.left_part').width();
    $('.right_part').width(full_width - left_width );
}

http://jsfiddle.net/gMxWc/62/ - here is working example

来源：https://stackoverflow.com/questions/7046819/how-to-place-two-divs-side-by-side-where-one-sized-to-fit-and-other-takes-up-rem

标签

html

overflow

css-float