Expand Div to Max Width When Float:Left Is Set

Expand div to max width when float:left is set

Hope I've understood you correctly, take a look at this: http://jsfiddle.net/EAEKc/

<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8" /> <title>Content with Menu</title> <style> .content .left { float: left; width: 100px; background-color: green; } .content .right { margin-left: 100px; background-color: red; } </style></head>
<body> <div class="content"> <div class="left"> <p>Hi, Flo!</p> </div> <div class="right"> <p>is</p> <p>this</p> <p>what</p> <p>you are looking for?</p> </div> </div></body>
</html>

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>

Expand middle div to remaining width when 2 divs aside as float:left and float:right

What if you place the right div before the middle one ?

<div class="content">
<div class="left">
<p>Hi, Flo!</p>
</div>
<div class="right">foo</div>
<div class="middle">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
</div>

See your updated jsFiddle


To explain :

Using float property is like using position:absolute property. It gets the elements out of the DOM flow. Which means they do not take any space in it.

That's why you have to set a margin-left property on the page content when using a float:left div. If not, the content will be juste under the left div.

At the oposite, your middle div is IN the DOM flow. So it takes all the space (because of his width AND his margin properties). So when you want to add your float:right div, the next available space to do it is below the middle div, and not anymore on the same line.

That's why, when you are using float properties, you have to set them before the "not-floated" content.

How do you set a floating div's width to take up remaining space without pushing other divs down?

Classic Floats

If you order it:

<div id="left-column"></div>
<div id="right-column"></div>
<div id="middle-column"></div>

and you float the left column left, and the right column right, the middle column should fill in the remaining space. You will have some issues with margins, borders and paddings though.


Flexbox

If you don't need to support older browsers, you can use flexbox. With flexbox, this sort of structure becomes much simpler, and the markup doesn't need to change.

You will need to be able to select the parent element, so for the purposes of this demo, the code will be wrapped by <div class="wrapper">.

.wrapper {  display: flex;  flex-direction: row;  height: 200px;}
.left { background-color: red; width: 100px;}.middle { background-color: green; flex: 1;}.right { background-color: blue; width: 100px;}
<div class="wrapper">  <div class="left"></div>  <div class="middle"></div>  <div class="right"></div></div>

max-width doesn't work with float

Use defined width percentages and float: http://jsfiddle.net/dEEW5/3/

div{
height: 100px;
display:block;
float:left;
}
.color1{
background-color: #6AC1FF;
width: 80%;
max-width:400px;
}
.color2{
background-color: #BDBCF4;
width: 20%;
max-width:100px;
}

Use defined width percentages with inline-block: http://jsfiddle.net/dEEW5/4/

body{font-size:0}
div{
height: 100px;
display:inline-block;
font-size:16px;
}
.color1{
background-color: #6AC1FF;
width: 80%;
max-width:400px;
}
.color2{
background-color: #BDBCF4;
width:20%;
max-width:100px;
}

Inline-block where the 2nd block drops when it can no longer fit within the container instead of shrinking: http://jsfiddle.net/dEEW5/5/

body{font-size:0}
div{
height: 100px;
display:inline-block;
font-size:16px;
}
.color1{
background-color: #6AC1FF;
width: 100%;
max-width:400px;
}
.color2{
background-color: #BDBCF4;
width:100%;
max-width:100px;
}

How to make a floated div use its maximum width

Thank you all for your suggestions, they pointed me in the right direction. It actually ended up being more simple than I thought it should be. I removed the float:left and position: absolute. The following CSS achieves exactly what I want:

The New CSS:

#frame {
border:2px solid red;
}

#content {
border:1px dashed red;
margin-right:15em;
}

#menu {
position:fixed;
border:1px dotted blue;
right:0;
top: 1em;
width:13em;
}

Somehow in the process of my trying different combinations the position: absolute; got in my #frame selector and it was throwing things off.

The above does the following:

  • Fixed position and width menu on the right
  • Content div on the left that uses remaining width
  • Content div uses full width even when not filled with text

This doesn't account for IE6's lack of working position: fixed; mentioned above but I can use the IE6 broken selector hack to make an alternative for that.

CSS - Float to max width

It doesn't make much sense to float something when you want it to expand to fill the parent. Just remove the float: left and the width properties from the .info division so that it will expand to fill the width of the parent and then add a margin-left: 100px to push it out from under the one that is still floated to the left.

CSS Div 100% with float:left

Just don't float the last div then its gonna work. Also remove the 100% width and give it a left margin of the width of your two fixed width divs. This should look like this:

http://jsfiddle.net/YMQbh/

CSS - Fill remaining width next to floated element and keep content from falling down below floated element?

EDIT:

The css code should look like this:

.floated {
width:200px; float:left;
}

.fill {
margin-left:200px;
}

Make a div auto expand width to the left instead of the right

This idea needs testing, but it works in Chrome at least:

  • Change .content and .sidebar1 to float: right instead of float: left.
  • In the HTML, move .sidebar1 after .content.


Related Topics



Leave a reply



Submit