css - How to center webpage content -


i can't seem solve issue on why 2 divs not centering on page. know because of float: left. life of me, can't figure out how solve problem. can help?

here html:

<body> <div align="center">   <div id="left" class="left"> left box needs on left of of white box </div>  <div id="content" class="content"> right box needs on right side of red box </div>  </div>     </body>   

here css:

body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }  body {   font-family: arial, sans-serif;   background: #006699; }  .content{   width: 300px;   float: left;   background: #ffffff;   height: 300px;  }  .left{   background: none repeat scroll 0 0 red;   float: left;   height: 300px;   width: 300px;  } 

i know float: left; causing problem don't know how solve it.

thanks.

wrap them in div set width , margin: 0 auto;... example change top level div align="center" class="center" (or id instead of class) , do:

.center {   width: 600px;   margin: 0 auto; } 

the align attribute wont effect alignment of block level element rather alignment of inline elements inside it. div's not.


Comments

Popular posts from this blog

java - SNMP4J General Variable Binding Error -

windows - Python Service Installation - "Could not find PythonClass entry" -

Determine if a XmlNode is empty or null in C#? -