asked on

how do I make my div's line up on the left and then wrap like a column only when they reach the bottom of the parent div

Trying to build a list to select from, and I want my div's to line up on the left and then only wrap when no more space is available at the bottom, Like a news-paper column.

Tried: style="float:left", but this lists the items horizontally first.

Thanks

Kim Walker

Theoretically this can be accomplished using CSS3 Flexible Box. I've only toyed with this once and it worked great until someone viewed my site on an iPhone5. Just now I realized I could probably have fixed that by including -webkit properties too.

sidwelle

ASKER

Ok, I have meetings all day, but will try to find time to test it and post back.

Thanks

sidwelle

ASKER

I can get it to work only if I set the

overflow:Scroll

Open in new window

, and then the scroll bars show up. Can you get it behave this way w/o scrollbars ?

-webkit-flex-direction: column;
    flex-direction: column;
    overflow:scroll;
    flex-wrap: wrap;

Open in new window

Kim Walker

Can you post a link to what you have?

sidwelle

ASKER

I just used the W3School example, its a little temperamental, but it works w/these numbers. Don't know what controls the col width ??

<html>
<head>
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    //overflow:scroll;
    flex-wrap: wrap;
    width: 400px;
    height: 220px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 80px;
    height: 25px;
    margin: 2px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
  <div class="flex-item">flex item 4</div>
  <div class="flex-item">flex item 5</div>
  <div class="flex-item">flex item 6</div>    
  <div class="flex-item">flex item 7</div>
  <div class="flex-item">flex item 8</div>
  <div class="flex-item">flex item 9</div>    
</div>

</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Kim Walker

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

sidwelle

ASKER

This worked, thanks for the help and sorry for the late response.