CODEWITHSUNDEEP
htmlcsscss-float
moosefetcher
moosefetcher

Reputation: 1901

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.

Upvotes: 0

Views: 119

Answers (3)

Pugazh
Pugazh

Reputation: 9561

Here is a solution using display: flex

.popup-container {
  width: 300px;
  background-color: coral;
}
.popup-text {
  display: flex;
}
.popup-text div.two {
  flex: 1;
  background-color: cornflowerblue;
}
.popup-text h3 {
  line-height: 1.25;
  padding: 0px 8px 0px 0px;
}
<div class="popup-container">
  <!-- set to width: 300px; in css -->
  <div class="popup-text">
    <div class="one">
      <h3>2.</h3>
    </div>
    <div class="two">
      <h3>Example text here, long enough to scroll</h3>
    </div>
  </div>
</div>

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115047

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>

Upvotes: 1

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10187

Use display:flex;

.popup-container {
  width: 300px;
}
.popup-container .popup-text {
  display: flex;
}
.popup-text h3 {
  line-height: 1.25;
  padding: 0px 8px 0px 0px;
}
.float-left {
  float: left;
}
.clear {
  clear: both;
}
<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 scroll</h3>
    </div>
    <div class="clear"></div>
  </div>
</div>

Upvotes: 1

Related Questions