CODEWITHSUNDEEP
htmlcsslayout
Askaga
Askaga

Reputation: 6331

html layout: how to float divs vertically

How do I get divs to float vertically like in this picture:

enter image description here

Background: I have a grid of checkboxes with content sorted alphabetically and I'd like to have alphabetic order progress vertically (since horizontal order is quite hard to follow). All the divs have same size (width like picture, height = 1 line size).

Update: To clarify: The main intention is to have a table layout with a variable amount of columns based on available screen width and have the cells in column-major order. The actual number of divs is not known in advance.

Upvotes: 15

Views: 4425

Answers (4)

2507rkt3
2507rkt3

Reputation: 21852

If you are willing to set a fix height on the table holding the cells you could use flexbox.

Set your holding container to:

display: flex;
flex-direction: column;
flex-wrap: wrap;

And your child elements to: 

flex-grow: 20%;
min-width: 200px;

See the pen: http://codepen.io/anon/pen/qIpAl

Upvotes: 4

Danield
Danield

Reputation: 125651

Although the following is not a complete solution, maybe others can build on it to achieve the necessary result:

FIDDLE

Markup

Divs wrapped in a container div

CSS

div
{
    width: 100px;
    height: 50px;
    background: orange;
    border: 1px solid yellow;
    display:block;    
}
div:nth-child(4n)
{
    display:table-cell;   
}
.container
{
    display:table;
    width: 100%;
}

Upvotes: 1

kevpoccs
kevpoccs

Reputation: 635

@KunJ : compatibility of grid layout is very bad... ie10 + only, http://caniuse.com/css-grid

I think without JS you can't do the tricks, I had the same problem, in order to resolve them, I've load all elements, count them et replace in the good div

Upvotes: 2

Dipak Kumar Pusti
Dipak Kumar Pusti

Reputation: 1723

CSS 

.cols {
        width:20%;
        float:left;
    }
    .rows {
        height:100px;
    }

HTML

 <div class="cols">
        <div class="rows">Div 1</div>
        <div class="rows">Div 2</div>
        <div class="rows">Div 3</div>
    </div>

    <div class="cols">
        <div class="rows">Div 4</div>
        <div class="rows">Div 5</div>
        <div class="rows">Div 6</div>
    </div>

    <div class="cols">
        <div class="rows">Div 7</div>
    </div>

Upvotes: 5

Related Questions