This is a totally trivial CSS problem, I'm sure, but I don't get it.
I want a centered DIV with a fixed width between two other DIVs that
should fill the rest of the window/viewport (= 100%). How do I achieve
this? I tried width:auto for the buffer DIVs, but it didn't work.
This should at least work in IE 5.5 and Opera. A totally
standards-compliant solution would be appreciated, of course ... :/
This is waht I have:
<html>
<head>
<title>Center Test</title>
<style type="text/css">
<!--
body
{
text-align:center;
background-color:#eeeeee;
}
BodyDiv
{
width:100%;
background-color:#eeffff;
}
#BufferLeft
{
display:inline;
float:left;
background-color:#ff0000;
}
#Container
{
float:left;
width:400px;
background-color:#00ff00;
}
#BufferRight
{
background-color:#0000ff;
}
-->
</style>
</head>
<body>
<p>Some centered text.</p>
<div id="BodyDiv">
<div id="BufferLeft"> </div>
<div id="Container">
<p>Some text in the container DIV, which should be 400 Pixels wide.
It should be centered between the left red and the right blue DIV.</p>
</div>
<div id="BufferRight"> </div>
</div>
<p style="clear:left">Some more centered text.</p>
</body>
</html>
