moosefetcher moosefetcher - 5 months ago 14
CSS Question

2 divs, side by side, with right-hand div taking up remainder of containing div

I have the classic two divs side-by-side problem, which usually I have no problem with (float: left both divs and add a clear:both div after them).

My requirements are making this more complicated to solve...

I would like the left-hand div to occupy, as a column, the left hand side of the containing div (the left hand div will hold a number, ie '1.')

I would like the right-hand div to occupy the remaining space to the right of the left div - and most importantly I would like it NOT to drop below the left-hand div when there is insufficient 'space' for it to fit. Instead, I would like the right-hand div to remain in position and for the text within to WRAP, staying to the right of the left-hand div. Surely this is simple!

I do NOT want to set arbitrary width values because the length of the number in the left-hand div will vary, affecting the distance between the number and the right-hand text.

Here is some example html:

<div class="popup-container"> // set to width: 300px; in css
<div class="popup-text">
<div class="float-left">
<h3>2.<.h3>
</div>
<div class="float-left">
<h3>Example text here, long enough to wrap around<.h3>
</div>
<div class="clear"></div>
</div>
</div>


And the css:

.popup-container {
width: 300px;
}

.popup-text h3 {
line-height: 1.25;
padding: 0px 8px 0px 0px;
}

.float-left {
float: left;
}

.clear {
clear: both;
}


OK, I think that's about it. If anyone knows how to have the left div operate as a column, against which the text in the right-hand div remains justified left (instead of dropping 'below' the left hand div), that would be swell.

EDIT
Thanks for all the answers. I should have mentioned (!!) it has to work in IE8. I know. But it really does. Big organisation, not updating its machines, unfortunately.

Answer

Flexbox and CSS Tables can both do that.

Support

Flexbox is IE10+

CSS Tables are IE8+


FLEXBOX

.popup-container {
       width: 300px;
       border:1px solid grey;
}

.popup-text {
  display: flex;
}

.popup-text h3 {
    line-height: 1.25;
    padding: 0px 8px 0px 0px;
}

.left {
  flex: 0 0 auto;
  background: #c0ffee;
}

.right {
  flex:1;
  background: yellow;
}
<div class="popup-container"> 
    <div class="popup-text">
        <div class="left">
        <h3>2.</h3>
        </div>
        <div class="right">
        <h3>Example text here, long enough to wrap around</h3>
        </div>
    </div>
</div>

CSS Tables

.popup-container {
       width: 300px;
       border:1px solid grey;
}

.popup-text {
  display: table
}

.popup-text h3 {
    line-height: 1.25;
    padding: 0px 8px 0px 0px;
}

.left {
  background: #c0ffee;
  display: table-cell;
}

.right {
  background: yellow;
    display: table-cell;
}
<div class="popup-container"> 
    <div class="popup-text">
        <div class="left">
        <h3>2.</h3>
        </div>
        <div class="right">
        <h3>Example text here, long enough to wrap around</h3>
        </div>
    </div>
</div>