saikiran saikiran - 3 months ago 9
CSS Question

Div Floating left goes down

I will have a three child div's in a wrapper, two of them will need to float right and one will always float left(one which has

.main
class). you can have a look at my HTML structure in the fiddle

My Fiddle Here

HTML:

<div id="wrap">
<div class="child">
This is initiator
</div>
<div class="child">
This is second joinee
</div>
<div class="main child">
This is third joinee
</div>
</div>


CSS:

#wrap{
width:600px;
height:400px;
}
.child:nth-child(even){
background:red;
}
.child:nth-child(odd){
background:green;
}
.child{
height: 200px;
width: 200px;
display: block;
float: right;
clear:right;
text-align: center;
vertical-align: middle;
}
.main{
height: 400px!important;
width: 400px!important;
float:left!important;
clear:none!important;
background:yellow !important;
}


But the Left floated Div always comes down. can some one help me understanding this behaviour.

Note: I don't want to change my HTML structure.

Answer

Add the following to the main class in your css file:

.main{
    position:absolute;
    left:0;
}
Comments