standardizing space between items

[dutch]

In two pages of my website, I have several photos with accompanying text, arranged in a vertical list. Here’s one page and here’s the other.

I’m not all that CSS-savvy, and I’m trying to find the best way to standardize the spaces between those listed items. You’ll see that the horizontal space between the entries isn’t consistent.

Right now I’m managing them with paragraph styling.. monkeying with padding and margins, and just sort of compromising by eyeballing it. Is that the best way to proceed, or is there a better way?

thanks

[Paulie_D]

It depends on what you mean by “standardise”.

The images are floated in paragraphs and so the final spacing will be determined by the amount of text in the paragraphs and whether or not it wraps around the text.

Do you have an image of how you would like it to look?

[dutch]

Thanks, Paul. I’m happy enough with the way the text and images are in relation to each other. What I’m after is a way to make the space between the text/image sets consistent. This image should help. I want all the spaces marked by the green arrows to be the same height, a height I determine.

Before I reworked the site yesterday, I was using white spacer images, but in the spirit of getting with the times, I’m trying to avoid that kind of thing.

thanks

[Paulie_D]

Yeah…erm, you really can’t do that with the layout method you have because that’s not the way floats work.

If the text is taller than the image it pushes the next image further down…etc etc.

Plus the images alternate left/right…so there is no consistency.

If all the paragraphs/image sets were the same height you might be able to do something but that’s an unreasonable idea because the amount of text would always be variable.

[Paulie_D]

That said, you do have some overflow issues.

You might be able to improve thinsg by changing this on line 99 of your CSS.

p.style8 {
    font-family: "Times New Roman", Times, serif;
    font-size: 1em;
    text-align: left;
    overflow: auto; /* add this */
}

[dutch]

Thanks, Paul. I’ll add that overflow setting. Not sure what overflow is all about, but will read up on it.

It sounds like my initial image/text issue could be remedied somewhat by trying to edit my texts down to roughly equal lengths. Out of curiosity, what sort of layout method would normally be used for something like this these days. Are tables still used?

[Paulie_D]

Tables would be one option but since this isn’t really tabular data you’d get the semantic-nazis on at you and it wouldn’t standardise the “row” heights.

I wouldn’t want to stifle content by restricting the amount of text content you can have…that seems wrong.

You have to come up with a happy medium as to the layout you want.

If you really, really want the gaps between the images to be the exactly the same then restricting the text to that height of the images is probably the only way.

[dutch]

I added the overflow setting to css and that seems to have helped square things up quite a bit. A little further attention to trimming the text, and I should be just about where I want to be. Thanks a lot for the help, Paul.

[bearhead]

Here is how I would do it:

http://codepen.io/kvana/pen/WrORqm

I added a yellow background color so you can more easily see the spacing between items.

The second item has a description that overflows the height, so you can see what will happen in that case.

You’ll need to either keep the description length short enough so that the text doesn’t overflow, or you’ll need to add JS that allows the user to view the overflow text in some fashion.

[dutch]

That’s really intriguing, bearhead. Thanks much. I’m going to play around with that right now.

[dutch]

bearhead, your solution worked well. Thanks much. I would like to get the texts to vertically align to the middle in their respective spots, but I’m exploring that now. Thanks again for the help.

[bearhead]

To center the text vertically, I would wrap the P elements in a div, and use the following css:

.book_list div{
  display:table;
  height:100%;
}
.book_list div p{
 margin:0px;
  display:table-cell;
  vertical-align:middle;
}

http://codepen.io/kvana/pen/WrORqm

[dutch]

That’s just what I needed, bearhead. Thanks a million.

[Author]

Posts