How can I align divs in a row rather than vertically?


Tags: html,css

Problem :

I need help with some issues with the <div> element using CSS/HTML.

1: div align

Examples are better than words, so I have a simple CSS example: http://jsfiddle.net/wmyxn7L8/ How do I force that when I add a second (the same) div, it will place it on the left of the first one and not under the first div. Here is how I don't want it to be: http://jsfiddle.net/dva4jgt1/ (divs are under the previous one).

2: Max divs per row

How can I set that when I add, for example 5 divs, the 6th will be under it (like e-shops). New divs should be added at the beginning, center, or at the end of body.



Solution :

This should work out for you.

.something {
     background-color: black;
     width: 200px;
     height: 120px;
     margin:4px 6px;
     float:left;
}
.something:nth-child(5){
     clear:left;
}

float left on .something will stack the next div you add next to it.

nth-child(5) selects the 5th div and uses clear left so that no other elements can float next to it, forcing them to the next line.


    CSS Howto..

    How to stop the navigation bar after scrolling?

    JavaFX How to change color of dialog/window title?

    CSS: How to center texts with transitioning position?

    Setting a revealing onhover behaviour for multiple elements-pairs with only CSS - how come this works?

    How to extend width and height automatically when the data gets increased

    How to find out DOM and CSS address to an element for Selenium?

    How do I show a background image in the first part of a page and make it cover 100% of the visible part of the screen?

    CSS media queries [how to transform to hyperlinks via media queries]

    How can I get horizontal overflows to work in CSS?

    How come my