Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS One div doesn’t float left Re: One div doesn’t float left

#132930
croydon86
Participant

@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.