How to Make Element Fill Remaining Width, When Sibling Has Variable Width

How to make element fill remaining width, when sibling has variable width?

Updated demo   (tested fine in IE7/8/9/10, Firefox, Chrome, Safari)

• Float the left and right elements.
• In the HTML source code, put both of the floated elements first (this is the most important part).
• Give the middle element overflow: hidden; and an implict width of 100%.
• Give the text box in the middle element a width of 100%.

.category_dropdown_container {    float: left;}
input[type="submit"] {    float: right;    ...}
.resizable_text_box {    padding: 0 15px 0 10px;    overflow: hidden;}.resizable_text_box input {    width: 100%;}

<div class="category_dropdown_container">    <select class="chosen chzn-done" name="question[category_id]" id="selQJK">        ...    </select></div>
<input name="commit" type="submit" value="Ask!" />
<div class="resizable_text_box">    <input id="question_text_box" name="question[what]"           placeholder="Write a query..." type="text" /></div>

Make div take up the dynamic width of sibling above while preserving flow

I couldn't find documentation that says this, but we can see that a table-caption element takes the width of its containing table (as opposed to stretching out based on its own amount of text like a block element does).

Paste this at the bottom of your CSS file to see it in action (I overrode the properties that are in the way. If you adopt this solution you can merge the styles of course).

.snake-page .detail-container .item-details .image-col {
  margin-top: 10px;
}
.snake-page .detail-container .item-details .image-col .image {
  display: table-row;
}
.snake-page .detail-container .item-details .image-col div.desc {
  position: static;
  display: table-caption;
  caption-side: bottom;
  margin-top: 5px;
}

My solution makes both elements table related elements, the description into a table-caption and the image into a table-row, so they basically act as one table. By giving the description caption-side: bottom I moved the description to the bottom of the table.

Expand a div to fill the remaining width

The solution to this is actually very easy, but not at all obvious. You have to trigger something called a "block formatting context" (BFC), which interacts with floats in a specific way.

Just take that second div, remove the float, and give it overflow:hidden instead. Any overflow value other than visible makes the block it's set on become a BFC. BFCs don't allow descendant floats to escape them, nor do they allow sibling/ancestor floats to intrude into them. The net effect here is that the floated div will do its thing, then the second div will be an ordinary block, taking up all available width except that occupied by the float.

This should work across all current browsers, though you may have to trigger hasLayout in IE6 and 7. I can't recall.

Demos:

• Fixed Left: http://jsfiddle.net/A8zLY/5/
• Fixed Right: http://jsfiddle.net/A8zLY/2/

div {
  float: left;
}

.second {
  background: #ccc;
  float: none;
  overflow: hidden;
}

<div>Tree</div>
<div class="second">View</div>

Fill remaining width inside parent that is also filling remaining width

I ended up changing my code and using the idea from the solution Chad provided in the comment to his answer. I also used his absolute-positioned button trick. This is what I did:

I used a span for the search box and moved the button out of the search box straight into the nav:

<nav>
    ...

    <span>
        <input type="text" placeholder="Search...">
    </span>
    <button class="searchBtn" type="button"></button>
</nav>

Using this css:

span {
    display: block;         /*This is the trick from*/
    overflow: hidden;       /*the solution Chad provided*/
}

input {
    width: 100%;
    padding-right: 65px;    /*This is to make room*/
}                           /*for the button*/

button {
    position: absolute;
    right: 0px;
    top: 0px;
}

overflow: hidden on the span makes it all possible. Read about it here: http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats

Prevent 2 floated siblings with variable width from wrapping inside of container?

As per i understand your question you need two div be inline even if window is resize set min-width: to container

.container {
  min-width: 1400px;
  ...
}

demo

UPDATE

New Demo

.container {
  .....
  min-width:380px;
}

.container > div{
  display:inline-block;
  position: relative; 
  width: 50%; 
  float: left;
}

Right div with variable width, left div takes remaining width

I removed the float:left; from your textarea div and added overflow:hidden;. I have also repositioned the submit div in the HTML so that it is placed before the textarea div. It seems to work fine.

Please see my fiddle

Making one element's width dependent upon its sibling's width

Sounds like a CSS table to me:

#container {  background: #DDD;   display: table;  width: 100%;}.row {  display: table-row;}.row > * {  display: table-cell;}.row:after {  content: " ";  display: table-cell;}#title {  width: 1px;  white-space: nowrap;}

<div id="container">  <div class="row">    <h1 id="title">Title that is fairly long</h1>  </div>  <div class="row">    <h3 id="subtitle">Subtitle that is a long subtitle and that is even longer and oh it is just so super!</h3>  </div>        </div>

CSS fill remaining width

You can realize this layout using CSS table-cells.

Modify your HTML slightly as follows:

<div id="header">
    <div class="container">
        <div class="logoBar">
            <img src="http://placehold.it/50x40" />
        </div>
        <div id="searchBar">
            <input type="text" />
        </div>
        <div class="button orange" id="myAccount">My Account</div>
        <div class="button red" id="basket">Basket (2)</div>
    </div>
</div>

Just remove the wrapper element around the two .button elements.

Apply the following CSS:

#header {
    background-color: #323C3E;
    width:100%;
}
.container {
    display: table;
    width: 100%;
}
.logoBar, #searchBar, .button {
    display: table-cell;
    vertical-align: middle;
    width: auto;
}
.logoBar img {
    display: block;
}
#searchBar {
    background-color: #FFF2BC;
    width: 90%;
    padding: 0 50px 0 10px;
}

#searchBar input {
    width: 100%;
}

.button {
    white-space: nowrap;
    padding:22px;
}

Apply display: table to .container and give it 100% width.

For .logoBar, #searchBar, .button, apply display: table-cell.

For the #searchBar, set the width to 90%, which force all the other elements to compute a shrink-to-fit width and the search bar will expand to fill in the rest of the space.

Use text-align and vertical-align in the table cells as needed.

See demo at: http://jsfiddle.net/audetwebdesign/zWXQt/

---

Related Topics