3-column layout will not float to the left due to height differences
I'm having a problem with some of the columns I've created and I just can't wrap my head around what's causing it. This is how it looks now:
My code (simplified version):
<div class="wrapper">
<div class="col-4 tall">1</div>
<div class="col-4 very-tall">2</div>
<div class="col-4 medium">3</div>
<div class="col-4 tall">Why can't I be under nr 1?</div>
<div class="col-4 tall">5</div>
<div class="col-4 small">6</div>
</div>
CSS:
.wrapper {
width: 600px;
margin: 0 auto;
}
.col-4 {
float: left;
display: inline;
margin-left: 1.31578947%;
margin-right: 1.31578947%;
width: 30.7017544%;
}
Here's the FIDDLE of my code.
So my problem is . I want the "Despicable Me" box to align all the way to the left, under "How To Train Your Dragon 2". If the top three columns have a fixed height then it works fine, but I don't want that, I want the column heights to expand based on the content.
+3
source to share
1 answer
The behavior you see is expected. I think you want a three-column layout, not a single div with a float to the left of all the children if you want to break with the expected behavior.
<div class="wrapper">
<div class="col-1"> . . . </div>
<div class="col-2"> . . . </div>
<div class="col-3"> . . . </div>
</div>
You can also use Masonry as mentioned above in the comments.
+2
source to share