close ad
Help us test the new Databridge BETA with MySQLi support
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Three Columns with Middle Centered?

Thread began 10/27/2009 5:33 pm by SPT | Last modified 10/29/2009 1:03 pm by Justin Nemeth | 3386 views | 6 replies |

SPT

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

Sign in to reply to this post

Justin Nemeth

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

Sign in to reply to this post

SPT

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.

Sign in to reply to this post

anonymous

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

Sign in to reply to this post

Justin Nemeth

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.

Sign in to reply to this post

SPT

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.

Sign in to reply to this post

Justin Nemeth

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

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...