CODEWITHSUNDEEP
htmlcssmultiple-columns
thatandrey
thatandrey

Reputation: 287

Re sizing columns with restriction in CSS

So I have a weird question. This is what I have so far. In the jfiddle, there's 3 columns of words, but in reality, I will be between 2 and 5. The problem is the columns can be long, but short in width. What I'd like is to be able to use the rest of the white space for the columns. I read this guide which gave me some suggestions and I added the following to the column divs:

div {
  -webkit-columns: 2 200px;
  -moz-columns: 2 200px;
  columns: 2 200px;
float:left;
}

However, it doesn't give me what I want, because when the page changes size, the columns go under each other, which is absolutely BAD. Is there any way I can have the columns (divs) wrap to take up any white space, but if the page becomes too small, then each div should be comprised of one column, and there should be horizontal scrolling.

In essence, I have 2 questions:

1)I don't want the divs to go underneath each other when the page resizes BUT 2) if there is white space, I'd like the divs to split and take up that empty space.

Does anyone have any suggestions? Thanks!

Upvotes: 0

Views: 44

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105893

you can see if using the column CSS is good enough with only setting the width of the colums: (run the code snippet below or this fiddle )

section {
    padding: 1em;
    -moz-column-width:5em;
    -webkit-column-width:5em;
    column-width:5em;
}
span {
    display: block;
    width: 5em;
}
<section>
    <div><span>column a</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>last word</span></div>

    <div><span>column b</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>last word</span></div>

    <div><span>column c</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>last word</span></div>    

  
</section>

Upvotes: 1

Related Questions