Static size centered DIV between two fluid DIVs?

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • David Winter
    #1

    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:le ft">Some more centered text.</p>

    </body>
    </html>
    Tags: None
    • Stephen Poley
      #2
      Re: Static size centered DIV between two fluid DIVs?

      On 27 Jul 2004 10:36:39 -0700, wintermute_101_ nospam@yahoo.de (David
      Winter) wrote:
      [color=blue]
      >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.[/color]

      I can offer a fixed DIV on the left (or right):
      404 Not Found
      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

      404 Not Found
      http://www.xs4all.nl/~sbpoley/webmatters/

        Comment

        • Gus Richter
          #3
          Re: Static size centered DIV between two fluid DIVs?

          David Winter wrote:[color=blue]
          > 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 ... :/[/color]

          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>Centerin g Test 2</title>
          <style type="text/css">
          ..leftDiv
          {position:relat ive;float:left; width:100px;hei ght:100px;borde r:1px solid
          green;}
          ..rightDiv
          {position:relat ive;float:right ;width:200px;he ight:100px;bord er:1px solid
          blue;}
          ..centerDiv {position:relat ive;width:400px ;left:50%;margi n-left:-250px;
          border:1px solid
          red;text-align:justify;f ont-family:sans-serif;}
          ..centerContent {position:relat ive;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="centerDi v">
          <div class="centerCo ntent"
          <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>

            Comment

            Previous template Next
            Working...