How to center webpage content_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-07 05:49 出处：网络

I can\'t seem to solve the issue on why my two divs are not centering on the page.I know it is because of float: left. But for the life of me, I can\'t figure out how to solve the problem.Can anyone h

相关专题：center css

I can't seem to solve the issue on why my two divs are not centering on the page. I know it is because of float: left. But for the life of me, I can't figure out how to solve the problem. Can anyone help?

Here is my HTML:

<body>
<div align="center">  
<div id="left" class="left">
Left box needs to be on left of of white box
</div>

<div id="content" class="content">
Right box needs to be on the right side of red box
</div>

</div>    
&开发者_C百科lt;/body>

Here is my 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 the float: left; is causing the problem but I don't know how to solve it.

Thanks.

wrap them in a div with a set width and margin: 0 auto;... for example change your top level div from align="center" to class="center" (or id instead of class) and then do:

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

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