How to create a number of fixed width divs that will fill available space

HTML & CSS
1

Hi there folks!

I’m creating a page that will display a list of results(perhaps 40-50) that will be in fixed width divs of 200px. What I would like to do is have the divs fall to the right of the predecessor until the visitor’s screen won’t allow anymore and then start a new row to continue the process. I’m wondering how I might go about that?

My test code is horrific so I won’t share it for fear of hijacking my own thread. Basically, I was able to either get them all to align to the right or all to fall underneath each other, but couldn’t figure out how to combine the two.

Thanks for your time!

2

The simplest way is display: inline-block

<div class="results">
   <div>Result 1</div>
   <div>Result 2</div>
   <div>Result 3</div>
   <div>Result 4</div>
   <div>Etc...</div>
</div>

CSS

.results div {
   background: red;
   width: 200px;
   display: inline-block ;

Though you could have a more advanced setup using flex if you are feeling adventurous.

3

4

A basic working example of inline blocks;-

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.