Centering the main Div

@grutFeb 14.2007

I was wondering how I center the main div of my website. The problem is, I want to set the middle of the div to the attribute “left: 50%;”

Am I explaining this well. Basically, I want to center the body of my page
~~[url]~~http://www.skyebar.com[/url]

Basically I’m looking at how to do this the right way:

div.main {
position: absolute;
top: 0px;
left: 50% -350px;
width: 700px;
height: 100%;
}

to post a comment

CSS

@WebJoelFeb 14.2007 — #I was wondering how I center the main div ....

div.main {

position: absolute;

top: 0px;

left: 50% -350px;

width: 700px;

height: 100%;

}[/QUOTE] This is easier:

div.main {

position: [B]relative[/B];

width: 700px;

height: 100%;

[B]margin:0 auto;[/B]

whereby "margin:0" means no margin "on top", and "auto" centers the rest (namely, left & right). With this method, you need a stated [I]width[/I] (which you already have) to make it work. ?

-Not a big fan of 'absolute' positioned stuff. Okay for small things like image iconography or other small content being 'positioned' strategically from inside of a [I]relative[/I]-positioned container. "position:absolute;" is 'out of the document flow', essentially, it is not on the page at all but based upon the location of your monitor screen... It exerts no pressure to 'push down' anything that comes after.

@grutauthorFeb 14.2007 — #Thanks. I've been told the same thing before. Doing this website was more of a hobby that I got paid for. I bartend at the bar, and did it basically just to see what it was like. I used notepad for the entire thing, so I'm guessing I got a lot of it wrong. The reason I use position:aboslute is because that's the only way I know to make sure everything lines up where it is supposed to. I'm sure I'm pretty off base about that, but it's how I taught myself how to do it. What would happen if I turned everything in the css doc to position:relative? Would it mess everything up, or would it look the same?

@grutauthorFeb 14.2007 — #Also, that code worked for centering the div, but for some reason it did two other things. It bumped the main div down a few pixels in both ff and ie, and it also stopped the div from touching the bottom of the screen...

Centering the main Div

3 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Centering the main Div

3 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #CSS _↴