How To Easily Center A Web Page
Posted on 13. Aug, 2007 by The Gimcracker in Technology
I used to try all kinds of sizing techniques and non-xhtml compliant methods. I tried absolutely positioning a div tag by giving it a left:20% and right:20% attribute, but this didn’t work in all browsers (I’m looking your direction, IE). I tried wrapping the whole div tag in a ‘center’ element, but we won’t even go into how many standards that violates.
I finally figured it out, thanks to the genius of Arcsin’s CSS skills, when I was looking at the stylesheet for the very blog you are reading as we speak, or as you read, rather. The blog. As you are currently reading the blog this post is in, as we sit here and speak, during whilst you read it, or something concurrently, visa vie.
Ergo, here is the code. Don’t blink because you’ll miss it, that’s how simple it is.
.container {margin: 0 auto;}
Just put everything inside
and you’re ready to rock and roll. Speaking of rock and roll, did you know Death Cab for Cutie rocks and rolls? I watched a RockDock about them and they go crazy up on stage. I mean they’re really rocking and rolling. You wouldn’t guess it solely by listening to their albums.P.S. Make sure your container div tag is inside another div tag with attribute text-align:center or this technique won’t work in IE.
Yeah, I was ecstatic when I discovered this. Sorry I never mentioned it to you…
The way I used to do it though was:
#container{
margin-left: auto;
margin-right: auto;
}
I guess I should also point out that you might need to put everything inside an outer container with text-align:center so it works in all browsers. I think IE6 might have some problems if you don’t do it like that. You could just add that attribute to the body, too.
I like dill pickles.
It’s part of my nature. Web development posts are inevitable on this blog – it’s what I do.
If you look at the category cloud on the left you’ll see that, based on the size of the font, at least it’s only a small part of the overall blog content, if that’s any consolation.
Whoever thought of a category cloud is a genius.
Kosher dill pickles on the side with a good veggie sandwich on fresh baked bread with feta cheese and hummus, topped with onions and cucumbers, tomatoes and and a nice warm french vanilla coffee, sitting out on the corner of the Rue de Malesherbes and…that other street, where dreams are made and destinies are set in motion…where truth shines forth, where heroes are born and covenants are made, where….I need to go pee…excuse me.
Stop spamming my blog you bastards.
ROFL. Enough said.
I hope they don’t think I was actually serious…
Too bad you can’t forgive me this Friday at group since I’ll be out of town.
Man you’re like a traveling salesman. Do you even go to men’s group anymore?
Man.
Man….
It’s been a while, I know. I really want to go this weekend, and I have no excuses. There’s always something to sell, places to visit, people to see, maidens to save, questions to be answered, knowledge to be sought. And somehow it ends up falling on a Friday night.
I will be there next weekend for sure. You can bet money on that.
Wow. Did you think your post about “centering a web page” would generate 10+ comments???
It’s all my fault. Couldn’t leave well enough alone, I guess. Welp. Shoot. Better pack up for that photo op. with the petting zoo in southern Missouri.