Fixed center and variable sides with CSS? [Archive]

Soda0815

07-25-2009, 11:03 AM

Hi,

how can i solve the following table hack with CSS?
The mid area should be fixed with 1020px, the left and right one should be variable up to the (left/right) browser borders.

Example: 12901

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<style type="text/css">
#left {
height : 50px;
min-width : 75px;
background : url('left.jpg');
}

#mid {
width : 1020px;
min-width : 1020px;
height : 50px;
background : url('mid.jpg');
}

#right {
height : 50px;
min-width : 75px;
background : url('right.jpg');
}

</style>
</head>
<body>
<table style="width:100%; border-collapse:collapse; text-align:center;">
<tr>
<td id="left">left</td>
<td id="mid">mid</td>
<td id="right">right</td>
</tr>
</table>
</body>
</html>

Left Image: 12898
Mid Image: 12899
Right Image: 12900

Thanks a lot
Soda

DaiLaughing

07-25-2009, 01:17 PM

Just add width:auto; to the styles for left and right.

Soda0815

07-25-2009, 03:30 PM

Thank you, but it does not work :( Now the left and right areas are only about 20px width, not up to the borders:
(changed mid to width : 820px; but this shouldn't be a problem.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<style type="text/css">

#container {
width : 100%;
text-align : center;
}

#left {
border : 1px solid blue;
height : 50px;
width : auto;
background : url('left.jpg');
float : left;
}

#mid {
border : 1px solid red;
height : 50px;
width : 820px;
min-width : 820px;
background : url('mid.jpg');
float : left;
margin : 0px auto;
}

#right {
border : 1px solid green;
height : 50px;
width : auto;
background : url('right.jpg');
float : left;
}

.clear {
clear : both;
width : 0px;
height : 0px;
margin : 0px;
padding : 0px;
}

</style>
</head>
<body>
<div id="container">
<div id="left">left</div>
<div id="mid">mid</div>
<div id="right">right</div>
<div class="clear"></div>
</div>
</body>
</html>

DaiLaughing

07-25-2009, 03:37 PM

I used your code as originally posted and added those two lines. It worked perfectly for me. Just tried it again and ditto. The side divs never go below 75px as expected:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<style type="text/css">
#left {
height : 50px;
min-width : 75px;
background : url('left.jpg');
background-color:red;
width:auto;
}

#mid {
width : 1020px;
min-width : 1020px;
height : 50px;
background : url('mid.jpg');

}

#right {
height : 50px;
min-width : 75px;
background : url('right.jpg');
background-color:red;
width:auto;
}

</style>
</head>
<body>
<table style="width:100%; border-collapse:collapse; text-align:center;">
<tr>
<td id="left">left</td>
<td id="mid">mid</td>
<td id="right">right</td>
</tr>
</table>
</body>
</html>

Soda0815

07-25-2009, 03:48 PM

ah, ok, I think you understood me wrong.
My table solution worked fine. But I like to do it only with css divs and without the help of the table.

Something like this:

<body>
<div id="left" />
<div id="mid" />
<div id="right" />
</body>