CSS Centering a webpage problem
I've trouble centering my webpage using the css:
CSS code below:
#wrapper {
margin-left:auto;
margin-right:auto;
width: 100px;
}
#welcome {
position:absolute;
top:202px;
width:560px;
height:224px;
z-index:2;
}
#newsSection {
position:absolute;
left:576px;
top:209px;
width:380px;
height:600px;
z-index:2;
}
HTML:
<body>
<div id="wrapper">
<div id="welcome">
//content here
</div>
<div id="newsSection">
开发者_StackOverflow社区//content here
</div>
</div>
</body>
I can center the webpage except for the #newsSection div.
The reason why I put "left:576px" under #newsSection div is because I want it to place it right next to the #welcome div.(side by side) However, when I shrink my browser size, #newsSection div will move to the left a bit and overlap #welcome div.
If I remove "left:57px", then the #newsSection div will appear right on top of #welcome div...Please help. Thanks
This is probably because youre using absolute position on the child divs. Therefore, "the kids will run wild", as in, they don't care that the parent div#wrapper is center.
Some potential code:
#wrapper {
margin-left:auto;
margin-right:auto;
width: 100px;
}
#welcome {
float: left;
width:560px;
height:224px;
}
#newsSection {
float: left;
width:380px;
height:600px;
}
you should use relative positioning, ie, tagname.class {position:relative; top/right:? ;}
To center a webpage you can use this:
.container{
width: 100%;
max-width:80%;
margin: 0 auto;
}
加载中,请稍侯......
精彩评论