Home/ Questions/Q 3808654
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T15:10:51+00:00

I can’t seem to solve the issue on why my two divs are not

  • 0

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>    
</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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0