Column grid, min-height

HTML & CSS
1

Hi all

I have a jsfiddel here - http://jsfiddle.net/ryz4wugo/

It’s four columns with varying amounts of text.

When the window is resized and the layout moves to two columns, block three is pushed to the right and block four pushed down.

Is this because the height of block one is greater than block two.

Is the best way to fix this with min-height, are there any problems with min-height in ie.

2

That’s just because the float is snagging onto the oter element. I would recommend using inline-block. Normally floats are used for a column structure which won’t allow float drops…Update the following

.row div
{
    float:none;
    display:inline-block;
    width:24.5%;
    vertical-align:top;
}.

Had to change the width from 25% to the 24.5% just because of the calculations taking place which prevented the 4th column from coming up.

3

I’m using bootstrap here so I’m not floating it. I don’t know if i should be overriding bootstrap code. I’m not sure what side effects that might have.

4

The divs are floated by default. That’s how they are side-by-side. You can easily just plug my code in and then you can go thorugh your pages to see what changes were made.

They shouldn’t have any effect at all since my changes replicate floating. I can’t say with 100% certainty that nothing will mess up but I can tell you I doubt it.

5

Just tested and it breaks the layout when scaling sorry

6

If it breaks the layout when scaling, then it probably was broken with floats. Can you give us a live example and show us the area which you say breaks?

If you were to use floats you’d have to ensure that each text areas height was the same (you’d have to set the height in em’s) which may be an option. The snagging occurs due to uneven heights.

7

If you look here - http://jsfiddle.net/ryz4wugo/8/

The columns don’t break into 2 then 1 column like they do here - http://jsfiddle.net/ryz4wugo/9/

8

I know I pesonally wouldn’t want that behavior (your floated behavior) but perhaps you might be interested in implementing flexbox

9

I need to support IE8

10

Perhaps use a CSS framework like Foundation to get the dropping behavior you want. As I said earlier, if you want the floated option you need to set an equal height on all the floated elemnts (em measurement would work since it allows text resize)

You have that, and you also have inline-block which doesn’t have the wrapping capabilities you want.

Unless I’m brain-farting…you’d have to use a framework like Foundation which will be easy to implement the wrapping features you want.

11

I’m already using Bootstrap. I thought there would be a simple solution to this but maybe not

12

The solution should be easy enough, but I don’t use BootStrap so if you will tell me where to find the media queries, I’ll pitch in.

EDIT:
A little diddling and it looks like your media query for two columns kicks in at 991px. This should work with your original code. Add to your local stylesheet.

@media screen and (max-width:991px) {
    .col-sm-6:nth-child(2n+1) {
        clear:left;
    }
}

IMPORTANT: JS comment marks cannot be used within CSS. It will invalidate a portion of the CSS that follows.

//min-height:150px;

CSS requires open and close slash-star

/* min-height:150px; */