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

Popular posts from this blog

javascript - Enclosure Memory Copies -

php - Replacing tags in braces, even nested tags, with regex -