CSS Fill Remaining Width

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/

Make a div fill up the remaining width

Try out something like this:

<style>
#divMain { width: 500px; }
#left-div { width: 100px; float: left; background-color: #fcc; }
#middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
#right-div { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
<div id="left-div">
left div
</div>
<div id="right-div">
right div
</div>
<div id="middle-div">
middle div<br />bit taller
</div>
</div>

divs will naturally take up 100% width of their container, there is no need to explicitly set this width. By adding a left/right margin the same as the two side divs, it's own contents is forced to sit between them.

Note that the "middle div" goes after the "right div" in the HTML

How to fill 100% of remaining width

Updated answer:

The answers here are pretty old. Today, this can be achieved easily with flexbox:

.container {  border: 4px solid red;  display: flex;}.content {  border: 4px solid green;  flex-grow: 1;  margin: 5px;}.sidebar {  border: 4px solid blue;  margin: 5px 5px 5px 0;  width: 200px;}
<div class="container">  <div class="content">    Lorem ipsum dolor sit amet.  </div>  <div class="sidebar">    Lorem ipsum.  </div></div>

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 the remaining height or width in a flex container

Use the flex-grow property to make a flex item consume free space on the main axis.

This property will expand the item as much as possible, adjusting the length to dynamic environments, such as screen re-sizing or the addition / removal of other items.

A common example is flex-grow: 1 or, using the shorthand property, flex: 1.

Hence, instead of width: 96% on your div, use flex: 1.


You wrote:

So at the moment, it's set to 96% which looks OK until you really squash the screen - then the right hand div gets a bit starved of the space it needs.

The squashing of the fixed-width div is related to another flex property: flex-shrink

By default, flex items are set to flex-shrink: 1 which enables them to shrink in order to prevent overflow of the container.

To disable this feature use flex-shrink: 0.

For more details see The flex-shrink factor section in the answer here:

  • What are the differences between flex-basis and width?

Learn more about flex alignment along the main axis here:

  • In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Learn more about flex alignment along the cross axis here:

  • How does flex-wrap work with align-self, align-items and align-content?

Make a div fill the height of the remaining screen space

2015 update: the flexbox approach

There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.

Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.

(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.

To check current support you can also see here:
http://caniuse.com/#feat=flexbox

Working example

With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.

html,body {  height: 100%;  margin: 0;}
.box { display: flex; flex-flow: column; height: 100%;}
.box .row { border: 1px dotted grey;}
.box .row.header { flex: 0 1 auto; /* The above is shorthand for: flex-grow: 0, flex-shrink: 1, flex-basis: auto */}
.box .row.content { flex: 1 1 auto;}
.box .row.footer { flex: 0 1 40px;}
<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box"> <div class="row header"> <p><b>header</b> <br /> <br />(sized to content)</p> </div> <div class="row content"> <p> <b>content</b> (fills remaining space) </p> </div> <div class="row footer"> <p><b>footer</b> (fixed height)</p> </div></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 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 occupy remaining width of parent

First of all, try avoiding float, it's quite messy.
In order to achieve the 'two items on one line' trick, you need to know to set the width of your button, and tell the input to take the remaining space with the calc() CSS attribute.

input {
display: inline-block;
width: calc(100% - 100px);
}

button {
width: 100px;
margin: 0;
display: inline-block
}

div {
width: 100%;
}

Check out this flexbox guide as well, it's very informative on how to place objects!

Good luck!

CSS Fill remaining width space

You can simplify your html, float the image element left (u_img) then apply overflow hidden to the second element (u_msg), this will 'tell' it to apply block level behaviour and stretch to the remaining space.

Demo Fiddle

HTML

<div id="chat" style="height: 350px;">
<div class="u_img">
<img src="https://lh3.googleusercontent.com/-g_zvhql17tw/AAAAAAAAAAI/AAAAAAAAARE/xQMDsE3q_K0/w48-c-h48/photo.jpg"" />
</div>
<div class="u_msg"><span class="post_time">Tue May 6 13:52:34 2014</span><span class="u_name"><b>Qixster</b>:</span><span id="msg_container" style="color: #000;font-size: 16px;">test</span>
</div>
</div>

CSS

#chat {
width: 100%;
height: 100%;
overflow:hidden;
border: 1px solid #c0c0c0
}
.msg {
border: 1px solid #c0c0c0;
min-height: -moz-fit-content;
min-height: -webkit-fit-content;
min-height: fit-content;
}
.u_img {
float: left;
max-height: 48px;
}
.u_msg {
padding-left: 5px;
font-family:'Ubuntu', sans-serif;
word-wrap: break-word;
overflow:hidden;
}
.u_name {
float: left;
}
.post_time {
float:right;
right:0px;
color:#c0c0c0;
font-size:10px;
}

The alternative would be to apply a display:table structure



Related Topics



Leave a reply



Submit