Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

resize middle div to fill space between divs when overflow:hidden; doesn't work

resize middle div to fill space between divs when overflow:hidden; doesn't work

Problem

I've got four divs. one container and three columns. Column 1 and 3 has a fixed Width, and column two needs to fill the gab between them. I would like the design to be re-sizable depending on the screen width. to a minimum of 300px.

My html

the CSS

#container {
width:100%;
min-width:300px;
position:relative;
}
#1 {
float:left;
min-width:300px;
min-height:10px;
background-color:red;
}

#2 {
overflow:hidden;
width:100%;
min-height:10px;
background-color:blue;
}

#3 {
float:right;
min-width:300px;
background-color:green;
}
Problem courtesy of: Michael Tot Korsgaard

Solution

Just remove width: 100%; from #2. It will automaticly take whole free space. Check fiddle: http://fiddle.jshell.net/ozeczek/aVbC6/

Solution courtesy of: norbert

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

resize middle div to fill space between divs when overflow:hidden; doesn't work

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×