根据窗口大小用浮动div填充容器并调整div的宽度以设置最大值

Question

im working on a page layout for a magazine. it now has 5 different categories - each of the categories is displayed on the main site inside a separate div floating left. so it looks like this

--------------page width-------------
-category1--category2--category3-
-category4--category5-

now i would like to have the three categories in first and second line stretch to take all the space until they reach a set amount of width and then fall back to a lower width to give more categories room in the first row on a page resize: (4 divs with min width does NOT fit inside the page width)

-----------------page width-----------
-category1  --category2  --category3 -
-category4        --category5        -

then on resize (as soon as 4 elements with the min-width fit in):

------------------------page width----------
-category1--category2--category3--category4-
-category5-

is this possible with css? (i don't think so) or with some javascript calculation. i tried a lot, but my java skills are just really bad ...

thanks so much! nice greets from vienna

Answer 1

I don't think you need any javascript to achieve this. I think what you're after is a media query within your css.

CSS has the ability to target css rules at specific canvas widths, device widths or orientations. So you could have markup like this

<div class="container">
    <div class="category-wrapper"></div>
    <div class="category-wrapper"></div>
    <div class="category-wrapper"></div>
    <div class="category-wrapper"></div>
    <div class="category-wrapper"></div>
</div>

And then change the widths of the category wrappers with CSS like this

.category-wrapper{
    float:left;
    width:100px;
}

@media (min-width:500px) and (max-width:950px){ 
    .category-wrapper{
         width:200px;
    }
}

@media (min-width:950px) and (max-width:1024px){ 
    .category-wrapper{
         width:400px;
    }
}

and so on.

See the spec for media queries here http://www.w3.org/TR/css3-mediaqueries/ a great primer on the concept of this way of working here http://www.alistapart.com/articles/responsive-web-design/

and since not all browsers support them, use Scott Jehl's amazing polyfill https://github.com/scottjehl/Respond to help out the laggers.

Hope this helps.