468,136 Members | 1,466 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,136 developers. It's quick & easy.

Static size centered DIV between two fluid DIVs?

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">&nbsp;</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">&nbsp;</div>

</div>

<p style="clear:left">Some more centered text.</p>

</body>
</html>
Jul 20 '05 #1
2 5230
On 27 Jul 2004 10:36:39 -0700, wi*******************@yahoo.de (David
Winter) wrote:
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.


I can offer a fixed DIV on the left (or right):
http://www.xs4all.nl/~sbpoley/webmatters/layout1.html

I suspect that having the fixed DIV in the middle can't be done in CSS,
though I'm not absolutely certain.

If however the central DIV is actually a 400px image, you may be able to
fake it by having two 50% DIVs with 200px right and left margin
respectively, and using relative positioning to place the image.

400 px is a bit big for a fixed DIV next to two others, incidentally -
for example my normal window width is around 750 pixels.

HTH
--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #2
David Winter wrote:
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 works with Geckos (only methinks). No chance for IE 5.5 - Opera 7.5
fails - not sure about IE 6:

--
Gus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Centering Test 2</title>
<style type="text/css">
..leftDiv
{position:relative;float:left;width:100px;height:1 00px;border:1px solid
green;}
..rightDiv
{position:relative;float:right;width:200px;height: 100px;border:1px solid
blue;}
..centerDiv {position:relative;width:400px;left:50%;margin-left:-250px;
border:1px solid
red;text-align:justify;font-family:sans-serif;}
..centerContent {position:relative;top:-100px;}
..centerContent p { clear:both; }
</style>
</head>
<body>
<p>Centering a DIV between two other DIVs.</p>
<div class="leftDiv">
This is leftDiv.<br>
relative positioning, floated left, width &amp; height
</div>
<div class="rightDiv">
This is rightDiv.<br>
relative positioning, floated right, height same as leftDiv, twice the
width as leftDiv
</div>
<div class="centerDiv">
<div class="centerContent"
<p>This is centerDiv.<br>
This is the way I did it: I gave it relative positioning, width and then
aligned its left edge
to the center of the viewport with left:50%. Then I assigned it a
margin-left value
by using the width values of each DIV and the following formula:</p>
<pre>
(leftDiv-rightDiv)/2 - centerDiv/2
</pre>
<p>This will distribute the white space evenly between the three
DIVs,resulting in centering
the middle DIV between the other two. There are two caveat, however.
Depending on the widths of
the DIVs and resulting gutter, if the viewport is reduced in size
sufficiently, the DIVs may, and
probably will, overlap. The second is that it probably only works in
Geckos - Opera 7.5 fails as
does IE 5.5 - not sure about IE 6.<br>--<br>Gus</p>
</div>
</div>
</body>
</html>

Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by Sue Thackston | last post: by
27 posts views Thread by KiwiBrian | last post: by
4 posts views Thread by yawnmoth | last post: by
22 posts views Thread by Jam Pa | last post: by
1 post views Thread by Richard | last post: by
7 posts views Thread by TheLongshot | last post: by
1 post views Thread by gcdp | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.