CSS Width and Float

[ciber]

Hi, I am getting a problem with my CSS, I cant get my boxes to align properly without them dropping to the next line, see picture and code below. If anyone can please help!

 

<div id="content">
<!-- Top Block -->
</div>

<div id="content" class="adj" style="width: 46%">
<!-- Left Block -->
</div>

<div id="content" class="adj" style="width: 46%">
<!-- Right Block -->
</div>

<div id="content">
<!-- Bottom Block -->
</div>

 

As you can see I set it to be 46%, but if I increase it, the blocks drop below each other instead of next to each other.

 

.adj {
height: 270px;
float:left;
}

#content {
width: 100%;
margin:5px;
border: 1px solid #2f78a5;
padding:10px;
-moz-border-radius: 5px;
background: #e5f5ff;
}

 

Thanks

 

[attachment deleted by admin]

[ignace]

You can use the value in an id attribute only once.

 

<div id="header"></div>

<div id="content"></div>

<div id="sidebar"></div>

<div id="footer"></div>

 

#content, #sidebar { float: left; width: 460px; }/*assuming the total width = 960px / 2 = 480px - 20px = 460 px*/

#content { margin-right: 20px; }

#footer { clear: both; }