CSS float not working correctly

Question

I am trying to split two divs into two sections, left and right. If the left is static (300 pixels high) and the right is not static (e.g. posts and comments). With footer below.

<div> <div> <div class="right"><img src="images/members/bigava/crays.png" style="width: 630px; height: 130px;" /></div> </div> <div> <div class="left" style="float: left;"><img src="images/members/ava/crays.jpg" style="width:120px; height:80px;" /></div> </div> 

I made my main div with a width of 760 pixels, so with these settings I still have 10px. The problem is that I cannot assign float-right to a div with the right class and can assign float-left to a div with a left class. I tried changing the div up and down by reassigning the positions, but what I get is not what I want. Any help?

change

 CSS .right { font-family: verdana; font-size: 12px; border-radius: 3px; } .left { font-family: verdana; font-size: 10px; color: #000000; border-radius: 3px; } 

These are the results that I get, which I do not want.

what I want

Answer 1

DIV is a block element, so you can give a float or inline-block your right div to accept its actual width as follows:

 .right{float:right} 

EDIT:

reply to your comment below

if you pass the float to divs then you should clear its parent as follows:

 <div style="overflow:hidden"> <div class="right" style="float: right;"><img src="images/members/bigava/crays.png" style="width: 630px; height: 130px;" /></div> <div class="left" style="float: left;"><img src="images/members/ava/crays.jpg" style="width:120px; height:80px;" /></div> </div> 

Answer 2

you need to get rid of some divs or assign floating parent divs to the right, divs to the left.

 <div> <div class="right" style="float: right;"><img src="images/members/bigava/crays.png" style="width: 630px; height: 130px;" /></div> <div class="left" style="float: left;"><img src="images/members/ava/crays.jpg" style="width:120px; height:80px;" /></div> <div class="footer" style="clear: both;"><img src="images/members/ava/crays.jpg" style="width:760px; height:80px;" /></div> </div> 

this should work.

Answer 3

If you correctly measure the width, you can get this layout by actually swimming all to the left. Your order for the div should fold to the right, and it will naturally float to where you want. You have more divs than necessary. Be sure to clean it.