CSS- How to keep a Div always center to Window?
May 30, 2007
Usually we all want our main content window to keep floating in middle of window when user resize browser or change display resolution and here is the small trick I used in my website (http://www.lakkakula.info)
Logic in CSS goes like
#yourdivid {
width : x px;
position: relative;
left: 50%;
margin-left: -x/2 px;
}
For example your div id is container and width is 600px
#container {
width: 600px,
position: relative;
left : 50%;
margin-left: -300px;
}
August 16, 2007 at 10:08 am
Your solution is not working with IE6 (test news.php on my website). Do you have a “IE6 friendly” solution?
The Flash header sould be centered all the time (even if window width < Flash width).
September 14, 2007 at 9:52 am
.Container {
*text-align:center; /* if you want ie<6 to center, i usually leave this out*/
}
.Main {
*text-align:left; /* ‘*’ hides from smart browsers */
max-width:1000px;
_width:1000px; /* for ie ie<7 */
margin:auto;
}
/* semi stretchy layouts see. romack.net */
October 19, 2007 at 4:39 am
I am not getting it,
The first one works on Firefox.
The second one doesn’t work at all?
Can you please explain this more clearly?
October 19, 2007 at 5:15 am
I think this is a better solution.
#container {
width: 600px,
position: absolute;
left : 50%;
margin-left: -300px;
}
March 11, 2008 at 11:33 am
I tend to use the solution:
margin: 0 auto;
It always works for me…