Problems with floating wrapper in CSS

Should be an easy one for you

[ChrisBolton]

Hi all,

I'm currently having a problem with centrally floating a div element.

The code is as follows:

#wrapper {
width: 800px;
position: relative;
left: 50%;
margin-left : -400px;
}

The float works fine. The only problem is that if the browser window is opened at / scaled to less than 800px in width, the page is still centralised and part of the left hand side [as well as the right] is missing from view. I would prefer it to align the left edge of the page to the left edge of the browser if the window is less than 800px.

Does anyone know of a quick workaround or a better way to do this?

Kind regards.
Chris.

[Marshall]

If you are trying to get a <div> to center on the page, which I think is what you are trying to do, try this:
#div {
margin: 0 auto; /* For most browsers */
padding: 0px;
width: 4000px;
text-align: left; /* IE Fix */
}

Marshall

[Xapti]

Consider not floating it and use what Marshall said. (and with the wrapper's parent element (be it body or whatever) text-align set to center)
Why do you need to have something centered and floated?

[edited by: Xapti at 6:31 pm (utc) on July 3, 2007]

[ChrisBolton]

Sorry guys,

I was in the middle of three things when I wrote that message.

There is no floating div. The div is positioned relatively. [see the code].

The problem is that if the browser window is less than 800px in width, the left side of the web page does not align with the left side of the browser window as the page is centralised regardless of the browser width.

For example, if I had 3 columns, left and right 200px wide, and a central column 400px wide, if the browser window was scaled to only 400px wide, the viewer would only see the central column. I need the left side of the page to line up with the left side of the browser.

Thanks guys.
Chris.

[coyoteRick]

I also think you should use Marshall's suggested method... although 4000px width... *whistles* Has to be a typo?

You don't want to float your wrapper...

There's also no need to position the wrapper relatively. Get rid of the position property altogether and just define margins and padding. Give your wrapper a width of 800px and make sure your left and right margins are set to auto. You can put "text-align:center;" on the body and then "text-align:left;" within the wrapper to accommodate some obnoxious bugs.

Do this and badda-bing badda-boom you got yerself a centered container. When you lessen the width of the browser window to be less than the width of the container, the container should end up flush against the left end of the browser instead of clipping it as you described.

Sometimes, the seemingly simplest of things can cause overwhelming complexities. Thus, I always have the "K.I.S.S." acronym as a mantra in my brain while working. :) Good luck to ya!

[ChrisBolton]

Cool guys,

Happy as always with the responses I get on this site.

Everything works great.

Where would we be without webmasterworld?

Regards.
Chris.