Three Columns with Middle Centered?

I am trying to create a very unique idea I had for a website. (Unique to me anyways)

Check it out here:
test.php
Be sure to resize up and down to see the way the columns and corners all stay correct (In Modern browsers)

The site literally has columns. One on the far right one on far left.
And the fixed position corners. (working on some java to secure backwards compat)

Problem - I need to place the content in the center and have it stay center. auto margins do not work.

To peek at the fireworks layout mockup: Built-Right-fire.html

Thanks

Looks like you need to structure the columns a little different. The general rule is in your wrapper, put any floated elements first, then your non-floated main content.

So, in your case. You would have a wrapper like this:

<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
  <div id="main"></div>
</div>

Then your css would like something like this:

#wrapper {

}
#left {
  width: 100px;
  float: left;
}
#right {
  width: 100px;
  float: right;
}
#main {
  width: 800px;
  margin: 0 auto;
}

Basically, float your columns, but don't float the main content. The auto left/right margins won't work on a floated element.

-justin

Thanks for the reply.

I guess I needed to put a place holder graphic in the center area "page-wrapper"
to demonstrate my problem. Look at the page again: test.php

If I use "auto" for the center area it will bump the right column top "column-right"
under the center area throwing the page off.

It was an idea I had long ago to create a page like this with css instead of Flash.

But it may not be possible. But a fun challenge.

Rob,

You could definitely do that with CSS.

You'll need to define the body's background first and then center your entire content wrapper.

Regards,

Brian

I am not sure what is different about your test page now. Did you try using the technique I described in my previous post? I agree this seems like something you can accomplish with CSS.

Thanks,

I do have it working, somewhat but not perfect.

I did move the "main" center div down below the right and left divs.

Then used the auto margins....then to get the "main" div to overlap the "topper" div
I added a negative top margin to "main" div.

Seems to work in modern browsers so far.

However when the browser window shrinks to small from side to side the "left" and "right" divs start to overlap the "main" div

I am researching a way to make the "outter" div stretch to out 100% but then only shrink to say 900 pixels.

You might be able to use min-width: 900px to handle that. Should work in modern browsers.