473,245 Members | 1,530 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,245 software developers and data experts.

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 5459
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Sue Thackston | last post by:
My first layout. I've got 2 divs, side by side, wrapped in a centered div with a border. I don't want to use a float to get the aforementioned divs to work side by side, so to get this to work, I...
27
by: KiwiBrian | last post by:
If I want to horizontally center a div on a page, but have the div of undefined width, so that it contains whatever is within it, as a table cell does, how do I code this in CSS? Brian Tozer
4
by: Mimo Zus | last post by:
I'm hoping that someone can explain what's going on; better yet provide a workaround. I'm designing a centered CSS site based on a 550 pixel wide vertical background image. Onto this background...
4
by: yawnmoth | last post by:
The buy behind the csszengarden has a tutorial on how to center absolutely positioned elements. Here's the last example: http://www.mezzoblue.com/tests/centered-css/ex5.html I've tried...
22
by: Jam Pa | last post by:
Once again my big mouth has landed me with a tough job. I have a static CSS layout, where each and every element has been defined by pixel size - lots of them, too! Mostly relative elements,...
1
by: Richard | last post by:
I have a table that is about 100 rows long and within that table I have tons of links. The table takes about 2 seconds to load. I think javascript might help somehow. The problem is that in...
7
by: TheLongshot | last post by:
I just recently converted a few pages of my application to using master pages. Problem is, in all of my content pages, the contents are centered. I can't figure out why. The markup in the...
18
by: Diogenes | last post by:
Hi All; I, like others, have been frustrated with designing forms that look and flow the same in both IE and Firefox. They simply did not scale the same. I have discovered, to my chagrin,...
5
by: warp | last post by:
With some help from a friend I made a layout for this website: http://jwstolk.xs4all.nl/roelof/ (don't mind all the unfinished junk, the home page is of concern) In FF 3 it shows just fine,...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.