Hi there!
I have three div's and I want two side divs seize as only space that is demanded by their content, and middle div to be as wide as possible. That's of cource in one row and with CSS.
The code is something like:
<div class='wrapper'>
<div class='small'>Left/div>
<div class='big'>Big</div>
<div class='small'>Right</div>
</div>
Any clues?
Have a look at The Perfect 3 Column Liquid Layout.
And here's one on Dynamic Drive.
Finally, for historical reasons, here's the A List Apart Holy Grail article.
The Perfect 3 Column Liquid Layout is a good place to start. You could also try something like this, which is very similar to that.
<html>
<head>
<title></title>
<style type="text/css">
.small1 {
float: left;
width: 20%;
height:100%;
}
.small2 {
float: right;
width: 20%;
height: 100%;
}
.big {
width: 60%;
height: 100%;
margin-left: 20%;}
</style>
</head>
<body>
<div class='small1'>Small1</div>
<div class='small2'>Small2</div>
<div class='big'>Large</div>
</body>
</html>
Edited due to slight markup mistake.
you can also use multiple wrappers (that way it'll be easier to set backgrounds)
<head>
<style>
.wrapper{background-color:black;}
.wrapperLeft{float:left;background-color:blue;width:70%}
.small{float:left;width:20%;background-color:red;}
</style>
</head>
<body>
<div class='wrapper'>
<div class='wrapperLeft'>
<div class='small'>Left</div>
<div class='big'>Big</div>
</div>
<div class='small'>Right</div>
</div>
</body>
Have a look at this article::: http://www.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/