CSS: resizing divs to parents width
Ok, I basically build a fluid layout. My HTML is as follows:
<div id="container">
<div class="box" id="left">Left</div>
<div class="box" id="center">This text is long and can get longer</div>
<div class="box" id="right">Right</div>
<div class="clear"></div>
</div>
Here is the css:
#container{
width: 100%;
}
.box{
float: left;
}
#left, #right{
width: 100px;
}
#center{
width: auto; /* ? */
overflow: hidden;
}
.clear{
clear:both;
}
I need to know how to get #centerto resize when #containerresized without elements moving under each other.
+3
3 answers
Try these fixes (just plain floating elements, no absolute elements or gaskets needed)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fluid layout</title>
<style>
/*class to set the width of the columns */
.floatbox{
width:100px;
}
#container{
width: 100%;
float:left;
}
#left{
float:left;
}
#right{
float:right;
}
#center{
overflow: hidden;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div id="container">
<!-- floating column to the right, it must be placed BEFORE the left one -->
<div class="floatbox" id="right">Right</div>
<div class="floatbox" id="left">Left</div>
<!-- central column, it takes automatically the remaining width, no need to declare further css rules -->
<div id="center">This text is long and can get longer</div>
<!-- footer, beneath everything, css is ok -->
<div class="clear"></div>
</div>
</body>
</html>
+2
The easiest way to do this and to completely avoid problems associated with this floatis to use the gasket on the container and the absolute position of the left / right elements in the fill area. (demo at http://www.jsfiddle.net/gaby/8gKWq/1 )
Html
<div id="container">
<div class="box" id="left">Left</div>
<div class="box" id="right">Right</div>
<div class="box" id="centre">This text is long and can get longer</div>
</div>
The order of divs no longer matters.
Css
#container{
padding:0 100px;
position:relative;
}
.box{
/*style the boxes here*/
}
#left, #right{
width: 100px;
position:absolute;
}
#left{left:0;top:0;}
#right{right:0;top:0;}
#center{
/*anything specific to the center box should go here.*/
}
+1