- This topic is empty.
-
AuthorPosts
-
April 23, 2013 at 3:20 pm #44324apartParticipant
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.
April 23, 2013 at 3:24 pm #132909wolfcry911Participantput 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
April 23, 2013 at 3:28 pm #132910apartParticipantHm 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 .portfolioitemdoesn’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.
April 23, 2013 at 3:40 pm #132914wolfcry911Participanthow 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
April 23, 2013 at 3:42 pm #132915apartParticipantThanks 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.
April 23, 2013 at 3:44 pm #132916rodolphebParticipantHi 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
April 23, 2013 at 4:02 pm #132918apartParticipantLooks 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.
April 23, 2013 at 4:24 pm #132919rodolphebParticipantthe 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;}April 23, 2013 at 5:52 pm #132924AlenParticipantYou 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
April 23, 2013 at 6:39 pm #132930croydon86Participant@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.
April 23, 2013 at 6:42 pm #132931croydon86Participant@rodolpheb – thats also a nice solution
April 23, 2013 at 7:11 pm #132938apartParticipantWow 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 -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.