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
tofloat: right
instead offloat: left
. - In the HTML, move
.sidebar1
after.content
.
Related Topics
Position an Element Relative to Its Container
Parsing HTML into Nsattributedtext - How to Set Font
How to Force a Long String Without Any Blank to Be Wrapped
Curved Div With Transparent Top
How to Access a Mobile'S Camera from a Web App
Align Image in Center and Middle Within Div
How to Support Placeholder Attribute in Ie8 and 9
Maintain Image Aspect Ratio When Changing Height
Using CSS :Before and :After Pseudo-Elements With Inline Css
Common Header/Footer With Static Html
Stretch Text to Fit Width of Div
Float Does Not Work in a Flex Container
How to Add Hamburger Menu in Bootstrap