html - CSS Centering a webpage problem -
i've trouble centering webpage using 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"> //content here </div> </div> </body>
i can center webpage except #newssection div.
the reason why put "left:576px" under #newssection div because want place right next #welcome div.(side side) however, when shrink browser size, #newssection div move left bit , overlap #welcome div.
if remove "left:57px", #newssection div appear right on top of #welcome div...
please help. thanks
this because youre using absolute position on child divs. therefore, "the kids run wild", in, don't care parent div#wrapper 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; }
Comments
Post a Comment