CSS: Two Divs - One Fills Space, One Shrink-To-Fit

CSS: Two divs - one fills space, one shrink-to-fit

Simply change float: left to float: right in Paul's example.

HTML:

<div id="outer">
    <div id="adaptive">I will adapt my width to my content.</div>
    <div id="filler">I will fill the remaining space.</div>
</div>

CSS:

#outer { overflow: hidden; width: 100%; }
#adaptive { float: right; }
#filler { overflow: hidden; }

Test jsFiddle

Two divs, one fixed width, the other, the rest

See: http://jsfiddle.net/SpSjL/ (adjust the browser's width)

HTML:

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

CSS:

.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
}

.right {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}

---

You can also do it with display: table, which is usually a better approach: How can I put an input element on the same line as its label?

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

#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>

How to make a div fill a remaining horizontal space?

This seems to accomplish what you're going for.

#left {  float:left;  width:180px;  background-color:#ff0000;}#right {  width: 100%;  background-color:#00FF00;}

<div>  <div id="left">    left  </div>  <div id="right">    right  </div></div>

How can create a two-column layout in CSS where one column shrinks to it's content, and the other expands to fill the remaining space?

I think one of my answers on another question solves this:

xHTML/CSS: How to make inner div get 100% width minus another div width

Am I understanding your question correctly?

How do I keep two side-by-side div elements the same height?

Flexbox

With flexbox it's a single declaration:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

CSS: Stretch divs to fit width, ONLY IF they are within each other's y-axis space

If your willing to use JavaScript you could try something like this

function assignWidths() {
  let rows = document.querySelectorAll('.row');

  for (let i = 0; i < rows.length; i++) {

    let row = rows[i],
        cellWidth = 100 / row.childElementCount;

    for (let c = 0; c < row.childElementCount; c++) {
        row.children[c].style.width = cellWidth + '%';
    }
  }
}

function addEle() {
  document.querySelector('.row').innerHTML += '<div>Cell</div>';
  
  assignWidths();
}

function removeEle() {
  let row = document.querySelector('.row');
  row.removeChild(row.lastChild);
  
  assignWidths();
}

assignWidths();

.row {
  width: 500px;
  
  border: 1px solid black;
  
  font-size: 0px;
}

.row > div {
  display: inline-block;
  
  font-size: 18px;
  
  text-align: center;
}

<div class="table">
  <div class="row">
    <div>Cell</div><div>Cell</div><div>Cell</div>
  </div>
</div>

<button onclick="addEle()">Add Element</button>
<button onclick="removeEle()">Remove Element</button>

Resize nested divs based on available space

This is one of the few legit use cases for a table. It supports old browsers (flexbox only IE10+) and is fully dynamic.

/* Maximum width of container */.outer {  width: 1000px;  display:table;}
/* Floats div container to the left */.inner-left {  vertical-align: -webkit-baseline-middle;  display: table-cell;}
/* Floats div container to the right */.inner-right {  width: initial;  display: table-cell;  border: 5px solid blue;}
/* ??? helpe me position these equally in available space ??? */.item {  width: 30%; /* This is wrong because they don't adjust to fill the space next to the blue "inner-right" content*/  text-align: center;  display: inline-block;  border: 5px solid red;}

<div class="outer">  <div class="inner-left">    <div class="item">Image and text here. I want all three of these to sit next too each other. But their width should adjust too fill the available space next to the blue "inner-right" content.</div>    <div class="item">Image and text here. I want all three of these to sit next too each other. But their width should adjust too fill the available space next to the blue "inner-right" content.</div>    <div class="item">Image and text here. I want all three of these to sit next too each other. But their width should adjust too fill the available space next to the blue "inner-right" content</div>  </div>  <div class="inner-right">    Some other divs and tables go in here. The width of this part will exapand based on the dynamic content it contains.  </div></div>

---

Related Topics