How to solve spacing problem

HTML & CSS
1

example of problem

Hey all, how would I go about fixing this problem? I have a list of varying heights, I’m using display: inline-block and I’d like all boxes to be 20px underneath each other, not with all varying gap heights.

Any help?

2

In that case, I’d use floats for this.

My example ASSUMES you are using that structure.

If you can easily modify your HTML structure, then you could simply have hte 4 first boxes in a parent element, and the last 4 in another parent element. Make hte margin spacing on the parent elements.

Otherwise, if your structure matches mine, you should probably go with mine, or even flexbox depending on what you need to support (assuming you need universal support so I went with floats.)

So basically, without knowing your HTML, I can only guess at what you have. If you give us your HTML/CSS we can be of further assistance. My example should show it’s pretty doable.

3 
#trailers {
    font-size: 1.2em;
    list-style-type: none;
    margin: auto;
    margin-top: 110px;
    min-width: 290px;
    width: 1280px;
}

 #trailers li {
     background: #FFF;
     box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
     color: #bdbdc1;
     display: inline-block;
     margin-right: 20px;
	 margin-top: 20px;
	 vertical-align: top;
     width: 290px;
 }

The CSS i’m using. With an unordered list with different lengths of content in each

4

Then use my example since there is no separation of parents between the lines.

Take my example and convert it for your use :slight_smile: .

5

Hi thanks for quick reply… looking at your example, its the same problem? I’m wanting each to butt up directly underneath with no height gaps in between…

So for example, Green is directly beneath Grey, Red under Orange and so on… with only a 10px gap for example

6

Oh, I misunderstood. I thought you were attempting to replicate your picture. One moment.

Edit-Building off what @dresden_phoenix is saying…what content will these boxes hold? Dynamic text? Simple image? Will it have a fixed width? I need these factors.

He makes a very good point.

7

Why do you need the display:inline block?
you you have signed a width, so it’s not for shrink wrapping, and you want the items to be stacked vertically. display:block ( or the default display on an LI ) will do this automatically. so what you’d to do is just not have the display:inline-block

are you saying you want to display the LIST as a table with ROWS and COLUMNS?

8

example

This is what I have, the top image and what I’d like to achieve, the bottom image, sorry for the crude image!

9

Are you open to changing hte markup? The simplest wya would be turning this into just straight up CSS columns.

1 3 5 7
2 4 6 8

That kinda structure. Each of those are columns.

10

Ryan is right. what you want is not possible w/o javascript, i think the name of the plugin is “masonry” .
other than that you would need to structure your content, knowing how many rows you will want, vertically.

1 Like
11

Yes, unless you are able to do this manually, with separate div columns, then you need JavaScript. The two best known scripts for this are Masonry (as noted) and Isotope.

12

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