div align=center

@Hooded_VillianOct 11.2009

Why is it that when I center my #container using div align=center, it centers, but if it goes past a certain height, it centers slightly to the left. You can see it when clicking between pages/nav links. If its a short page like About Me, it centers slight to the right. But of its a long page like My Lifes History, it bumps slightly to the left. I have never come to conclusion or found an answer for this…

hmmm… will try cross browsers quick.

Mozilla does it.
IE doesn’t do it.
Opera does it REALLY badly. Even shifts the top for some reason.
Chrome does it.
Safari does it.

Does anyone have a curable answer?

TIA…

to post a comment

CSS

10 Comments(s) _↴

@brandon_cordellOct 11.2009 — #first set an explicit width to the div you want to center, then set margin to 0 auto.

[CODE]
 div {
 margin: 0 auto;
 width: 100px;
 }
 [/CODE]

@Hooded_VillianauthorOct 12.2009 — #first set an explicit width to the div you want to center, then set margin to 0 auto.

[CODE]
 div {
 margin: 0 auto;
 width: 100px;
 }
 [/CODE]

[/QUOTE]

Nope... Still Doesn't work.

[CODE]#container {
 width: 1000px;
 margin: 0px auto;
 }[/CODE]

@cfajohnsonOct 13.2009 — #What does "doesn't work" mean? What does happen?

It is generally not a good idea to use a px measurement for widths.

Better to use percentages, e.g.:

<i>
 </i>div
 {
 width: 90%;
 margin: 0 auto;
 }

@Hooded_VillianauthorOct 13.2009 — #What does "doesn't work" mean? What does happen?

It is generally not a good idea to use a px measurement for widths.

Better to use percentages, e.g.:

<i>
 </i>div
 {
 width: 90%;
 margin: 0 auto;
 }

[/QUOTE]

"It doesn't work" means that the solution above, doesn't solved the problem of #container shifting slightly too the left when going through the different links of navigation!

Ie: home page aligns centrally. Services pages is longer, height wise, that home. And the #container shifts slightly to the left when you go from Home to Services.

My #container has to be a fixed width for the layout to work, so setting it as a percentage won't work!

@Hooded_VillianauthorOct 13.2009 — #[CODE]* { padding: 0; margin: 0; }[/CODE]

Just found this on contact form somewhere. What would be the point of this, in css?

@kudzugazetteOct 14.2009 — #Add this to your header (not to your style.css, because it doesn't work on IE):

[CODE]
 <!-- always show scrollbar -->
 <![if !IE]>
 <style type="text/css">
 body {
 overflow-y: scroll;
 }
 </style>
 <![endif]>
 [/CODE]

What's probably happening is the scrollbar is showing and disappearing as the pages get long and shorter. Using this method, the scrollbar will always appear.

@brandon_cordellOct 15.2009 — #[CODE]* { padding: 0; margin: 0; }[/CODE]

Just found this on contact form somewhere. What would be the point of this, in css?[/QUOTE]

The point of that snippet is to set padding and margin to 0 on every element.

* is a selector that affects EVERY element on the page.

@Hooded_VillianauthorOct 16.2009 — #Add this to your header (not to your style.css, because it doesn't work on IE):

[CODE]
 <!-- always show scrollbar -->
 <![if !IE]>
 <style type="text/css">
 body {
 overflow-y: scroll;
 }
 </style>
 <![endif]>
 [/CODE]

What's probably happening is the scrollbar is showing and disappearing as the pages get long and shorter. Using this method, the scrollbar will always appear.[/QUOTE]

I honestly cannot believe I missed that... I been sitting here, racking my brain for ages. It was such a simple little thing. Didn't even see that one coming... Was expecting a css bug or what not.

Thanks a million. I learnt a new trick of the trade. :-)

@kudzugazetteOct 16.2009 — #No problem.

@Hooded_VillianauthorOct 16.2009 — #The point of that snippet is to set padding and margin to 0 on every element.

* is a selector that affects EVERY element on the page.

It is generally bad practice to use that code. Use this reset instead.

http://meyerweb.com/eric/tools/css/reset/index.html

also... do you have a link to your site or are you developing locally? It's very difficult to try and debug someone elses CSS when you can't even look at the entire stylesheet/html document.[/QUOTE]

Thanks a million. I appreciate the input. That was quiet an interesting idea... I dunno if I will ever be using a css reset, coz I test my pages through quiet a few browsers, but thanks again. It's good to learn these things and know that that option exisits.

Am currently developing locally. But the problem is solved... kudzugazette's solution was the resolving factor.

Thank you for your input.

Also in #CSS _↴

Div impacting another div - help Need this IE and Firefox compatible.Safari position issues

Success!

Help @Hooded_Villian spread the word by sharing this article on Twitter...

Tweet This

div align=center

10 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

div align=center

10 Comments(s) ↴

Also in #CSS ↴

Success!

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

Social

Version

10 Comments(s) _↴

Also in #CSS _↴