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: 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: (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 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 highlight a row in a table on certain occasions

    How to load CSS in Django templates?

    how to Load a css file for html page android web view

    How to implement css classes in form using laravel collective 5.2 . *

    how to indent HTML forms on modals [closed]

    How to handle Chrome rendering dynamically added elements with incomplete CSS

    how to create 3 columns in HTML+CSS and group 2 div elements in the third column

    How to create a smooth zoom and display an overlay when another HTML element gets hovered?

    how to indent html output using CSS

    How to Trigger css animation both on scrolling down and up

    How to center CSS Navigation Menu

    How to position a fixed div under another fixed div?

    How are new lines made with text as background?

    how to prevent form height increase on every click in Internet Explorer 9 in jqGrid

    how to set word break in table th or td, when column and table-layout auto using CSS

    How to prepend a number before an HTML H2 with CSS?

    How to modify a CSS display property from JavaScript?

    How to make right-side triangle in CSS ribbon menu?

    HTML/CSS: How do I make right floats go to the top instead of floating at the position where they were when they were inline?

    how to div.width css property using js or jquery?

    Grunt: how to concat a .CSS file onto my compiled .SCSS files?

    How do you align text of one item in nav?

    how to use css to style a descendant (not a direct child) of an element?

    How to add custom layout and css in a CakePHP application?

    How to toggle display: inline and display toggle?

    Show only small portion of an image [closed]

    How To Select Two classes with CSS?

    How do I disable position:fixed in web pages?

    How to handle text overflow. Is there a Firefox equivalent to the text-overflow style from IE and Safari?

    How to keep the footer docked at the bottom of the page considering following structure? [duplicate]