Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS float left not working right

Tags:

css

css-float

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

like image 905
Crays Avatar asked Oct 24 '11 14:10

Crays


Video Answer


2 Answers

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>
like image 115
sandeep Avatar answered Sep 21 '22 00:09

sandeep


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.

like image 44
Emir Akaydın Avatar answered Sep 20 '22 00:09

Emir Akaydın