CODEWITHSUNDEEP
htmlcss
ahmohamed
ahmohamed

Reputation: 2970

Expand div to fit floated children instead of inserting line breaks

Consider this simple example

<div class="outer">
     <div class="left">
          left left left left left left left left left left left left left left left 
    </div>
    <div class="right">
        right
    </div>
</div>

I want to float the children divs to left and right, in the same line. Also, when the outer divsize is shrinked, I want it to scroll, rather than inserting a line break between the 2 divs.

This is my CSS:

.outer {
    width:fit-content;
    border: 1px solid black;
    white-space:nowrap;
    overflow-x:auto;
}
.left, .right{
    display:inline-block;
}

.left {
    background-color: #dcc2c2;
}
.right {
    clear:none;
    float:right;
    background-color: #d0dee8;
}

The problem is that when outer div is shrinked, a line break is inserted: enter image description here

Here is a demo fiddle. Any help is appreciated.

Upvotes: 3

Views: 518

Answers (5)

Oriol
Oriol

Reputation: 288260

On browsers that support text-align-last, you can display them as inline-blocks and justify them:

.outer {
  white-space: nowrap;
  overflow-x: auto;
  -moz-text-align-last: justify;
  text-align-last: justify;
  border: 1px solid black;
}
.left, .right {
  display: inline-block;
}
.left {
  background-color: #dcc2c2;
}
.right {
  background-color: #d0dee8;
}
<div class="outer">
  <div class="left">left left left left left left left left left left left left left left left</div>
  <div class="right">right</div>
</div>

Upvotes: 0

JesseEarley
JesseEarley

Reputation: 1032

You need to float your .left class, you aren't doing that.

.left {
    background-color: #dcc2c2;
    float: left;
}

This will make .left and .right float in the same line, until there isn't enough room on that line, then they fill below.

You should also set the height of the .outer div.

Upvotes: 0

Oriol
Oriol

Reputation: 288260

You can use flexible boxes:

.outer {
  display: flex; /* Magic begins */
  justify-content: space-between; /* Flush to the edges */
  overflow-x: auto; /* Add scrollbar if necessary */
  border: 1px solid black;
}
.left, .right {
  flex-shrink: 0; /* Don't shrink them */
  white-space: nowrap; /* Don't wrap lines inside them */
}
.left {
  background-color: #dcc2c2;
}
.right {
  background-color: #d0dee8;
}
<div class="outer">
  <div class="left">left left left left left left left left left left left left left left left</div>
  <div class="right">right</div>
</div>

Upvotes: 2

phts
phts

Reputation: 3925

Use absolute position of both left and right divs and relative position of outer

.outer {
    position: relative;
    height: 100px;
    ...
}
.left, .right{
    display:inline-block;
}

.left {
    position: absolute;
    left: 0;
}
.right {
    position: absolute;
    right: 0;
}

But outer's height should be set implicitly.

http://jsfiddle.net/4Bqvg/13/

Upvotes: 0

gfullam
gfullam

Reputation: 12045

Table it

.outer {
  display: table;
  width: 100%;
  border: 1px solid black;
  white-space: nowrap;
}
.left,
.right {
  display: table-cell;
}
.left {
  background-color: #dcc2c2;
}
.right {
  background-color: #d0dee8;
}
<div class="outer">
  <div class="left">left left left left left left left left left left left left left left left</div>
  <div class="right">right</div>
</div>

Upvotes: 4

Related Questions