One div doesn’t float left

[apart]

Check out the code pen [here](http://codepen.io/markomarkogame/pen/huwLG “here.”)

As you can see the portfolio item “Justin’s Johnson” doesn’t go full left even thought it’s set float left as the other ones and the “Park prirode” one is now on bottom. I don’t see why, this is static now but it will be replaced with dynamic posts of wordpress later.

Any help appreciated.

[wolfcry911]

put a border on .portfolioitem and you’ll see what’s happening.

Two quick solutions:

1) add this to your css

.portfolioitem:nth-child(3n+1) {
clear: left;
}

_or_

2) change the float: left to display: inline-block in .portfolioitem

[apart]

Hm so that’s the only way ? I won’t be using nth child since IE8 and older doesnt support it and I dont wanna get into some side hacks to support it.

Also why is it that i cant use float left here ? I don’t get it really. Why is this happening to my divs here ?

THIS:
2) change the float: left to display: inline-block in .portfolioitem

doesn’t work since the first div and the last get messed up. I can solve this by adding height to .portfolioitem but thats not such a good solution since im going dynamic.

[wolfcry911]

how is that display: inline-block messes up the first and last item? I tested and didn’t see any difference.

how many items could you potentially have? If, for example, you know you won’t have more than 12 items (or other number not too cumbersome) you could do something like this to satisfy older IE

.container div + div + div + div,
.container div + div + div + div + div + div + div,
.container div + div + div + div + div + div + div + div + div + div {
clear: left;
}

not pretty, but should work

[apart]

Thanks for your help but i hate that this is only solution, but maybe it isn’t , maybe there is another way ?

It messes up for me in Firefox. In the end i guess I will go with height settled and overflow hidden so text doesnt go overflow.

[rodolpheb]

Hi you can use table and table-cell by creating two DIV (box) in the container: http://codepen.io/rodolpheb/pen/kIyGh

works with IE8: http://caniuse.com/css-table

[apart]

Looks good enough solution, thanks for that but I still wonder why is this happening to the divs ? I never encountered this before, is there something specific that I’ve done or ? .. This table cell and using height are two kind of good solutions.

[rodolpheb]

the problem is created by the H2 which height makes the floating complicated.
Try either solution below:

h2{
font-weight:normal;
padding-bottom:10px;
width:200px;
overflow: hidden;
white-space:nowrap;
text-overflow: ellipsis;}

h2 {
width:300px;
height:60px;}

[Alen]

You have to define height on the floating element otherwise it will always float at the edge of `h2` element.

See here: http://codepen.io/anon/pen/EkKDy

[croydon86]

@markomarkogame the reason this is happening is because when you float elements, they are removed from the normal flow of the document, and only float up to the next floated element. In this case, the first element has two lines of text, making the height larger than the 2nd and 3rd element, so there is some extra height on the first element. The 4th element is floating next to this additional height, as opposed to the left of the page.

Quick code pen to show you what I mean – http://codepen.io/anon/pen/gpqiy

As you mentioned these will be dynamic, like you I would avoid hacks and recommend either setting a height like @AlenAbdula suggested, or a min-height to .portfolioitem like this…. http://codepen.io/anon/pen/gLsGb or using inline-block like this… http://codepen.io/anon/pen/eGBko (I have added ‘vertical-align:top’ so the layout doesn’t mess up when two lines are added.

[croydon86]

@rodolpheb – thats also a nice solution

[apart]

Wow thanks guys for responses ! I decided to go with setting height on a div. Seems to me most simple approach and most common one on the web.

@croydon86 Loved the explanation

[Author]

Posts