Search code examples
htmlpositioning

Automatic positioning div from left to right

i will try to explain this better than in title.

I have a big div with width = $(window).width()

Now i will have an undetermined number of div with images as backgrounds.

I want it all are positioning from left to right into the big div. Due to big div will have differents sizes (screen resolution) but divs with images will have same size always (all 300x200)...i want for example, if only 4 divs with images fit in the first line, the fifth image div goes to the second line.

Where to start?

Solution

  • Simply define your width for the div elements inside your container, and float them left. For example:

    div.container > div {
    width: 300px;
    height: 200px;
    float: left;
}

    Here's a jsFiddle demo (resize the results pane to see it in action).