CODEWITHSUNDEEP
csscss-float
Crays
Crays

Reputation: 2508

CSS float left not working right

i'm trying to split two divs into two section, left and right. With the left one being static (300px height) and right one is not static (such as posts and comments). With a footer at the bottom.

<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 760px, hence with those setting, i still have 10px to spare. The problem now is, i cannot assign float-right to the div with right class, and can only assign float-left to the div with left class. I tried changing the div up and down, reassigning the positions, but what i get isn't what i want. Any help?

edit

CSS
.right {
font-family: verdana;
font-size: 12px;
border-radius: 3px;
}

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

This is the results i get which i don't want enter image description here

enter image description here

what i want is enter image description here

Upvotes: 8

Views: 66641

Answers (3)

sandeep
sandeep

Reputation: 92793

DIV is a block element so you can give float or inline-block to your right div to take its actual width like this: 

.right{float:right}

EDIT:

answer your comment below

if you give float to the divs then you have to clear its parent like this :

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

Upvotes: 14

creativeedg10
creativeedg10

Reputation: 691

If you do the width measurements right, you can get that layout by actually floating everything to the left. Your div order has to stack right, and it will naturally float to where you want it. You have more divs than necessary. Be sure to clean this up.

Upvotes: 2

Emir Akaydın
Emir Akaydın

Reputation: 5823

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

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

Upvotes: 3

Related Questions