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 keep the underline effect in this demo stay using CSS?

    Rails: how to style submit tag with custom css

    AngularJS: with ng-animate & ng-view, how to make a 3D cube rotation effect?

    How to tell if text is overflowing in a table cell in Firefox?

    How to minified all js and css files using gruntfile.js in sails.js

    How to conditionally resize image if screen not wide enough, with CSS?

    How to make specific checkbox items bold (not all) via CSS?

    CSS Animations - How to make it stay there after animation? [closed]

    How to style Select2 input tags with css and how to limit them

    How to make text with certain id show up after hovering over a certain image

    HTML/ CSS: A href exceeds linking image - how to avoid?

    How to use css and images to create a rounded header section in an HTML page?

    How to select css id's with numbers in them?

    How to apply css for anchor tag inside table

    How to make font sharp in CSS?

    Show Link on image at hovering in jquery

    how does the path work in css and js

    How can I center vertically a div with position absolute and hight = 100px on another div with position relative but with not standard height

    VERY BASIC: How to inline social media logos on a header

    show,hide DIV with mouseover , mouseout

    How to dim an image keeping transparency untouched with CSS or JS?

    How to get CSS pseudo-elements to look the same cross browser?

    How do you make speech bubble with Tooltipsy?

    Javascript - how to show and hide an element per second?

    How can I use CSS borders to visually group my sections?

    how to crop images that has any size using css

    How to write CSS keyframes to indeterminate material design progress bar

    How to Make A Fancy Arrow Using CSS?

    How to animate CSS with a delay between an unknown number of elements [duplicate]

    Flexbox: How do I create my thumbnails to span 100% of the container width?