CODEWITHSUNDEEP
htmlcsscss-float
Webdeveloper_Jelle
Webdeveloper_Jelle

Reputation: 2856

make floating divs fill whitespace

I have the problem that I have 3 divs and when one div is longer than the other div, it creates some whitespace.
I would like to have the whitespace gone and the divs connect.
This is what I have now:

.one{
background: lightgreen;
height: 300px;
width:100px;
float: left;
margin: 5px;
}
.two{
background: brown;
height: 500px;
width: 100px;
float: left;
margin: 5px;
}
.main{
width: 220px;

}
.info{
background: orange;
height: 200px;
width:100px;
float: left;
margin: 5px;

}
<div class='main'>
<div class='info'>

to this one

</div>
<div class='two'>



</div>
<div class='two'>
this one should be up


</div>
<div class='two'>



</div>
<div class='one'>



</div>
</div>

The only reason I have these classes is because I want to show an example of my problem, In reality all divs have the same class.
Could anyone solve the problem for me?

my problem As you can see in my image, the bottom div is not connected to the one above it.
all divs have float: left;

Upvotes: 0

Views: 113

Answers (3)

IVleafclover
IVleafclover

Reputation: 69

That is not possible, when the class .two is floating left. You have to use float:right for the class .two instead.

.one{
background: lightgreen;
height: 300px;
width:100px;
float: left;
margin: 5px;
}
.two{
background: brown;
height: 500px;
width: 100px;
float: right;
margin: 5px;
}
.main{
width: 220px;

}
<div class='main'>
<div class='one'>

to this one

</div>
<div class='two'>



</div>
<div class='one'>
this one should be up


</div>
</div>

Upvotes: 1

Neelansh Verma
Neelansh Verma

Reputation: 142

Add float:right to .two div element

Upvotes: 1

Gerardo BLANCO
Gerardo BLANCO

Reputation: 5648

You will need to float the .two class to the right.

float: right;

Hope this helps :>

.one{
background: lightgreen;
height: 300px;
width:100px;
float: left;
margin: 5px;
}
.two{
background: brown;
height: 500px;
width: 100px;
float: right;
margin: 5px;
}
.main{
width: 220px;
}
<div class='main'>
<div class='one clearfix'>

to this one

</div>
<div class='two'>



</div>
<div class='one'>
this one should be up


</div>
</div>

Upvotes: 1

Related Questions