How do I stop css pushing <li> to the right? - Photoshop

Chris
February 21, 2016
273 views
3 votes
3 Answers

This is my first question and I’m having real difficulties sorting this problem. Basically I have created a gallery using ul and li to make it responsive. The gallery can be found here:

http://www.radiologycafe.com/radiology-trainees/normal-variants

The issue I’m having is that if the text underneath the image is too long, it pushes the image directly below to the right of the page.

How can I keep the images in a line whilst keeping the page responsive and avoiding the use of white-space:nowrap which causes the text to overlap with other text?!

Can anyone help me!?

Screenshot of the problem. I have drawn on (using amazing photoshop skills) how I want it to look

Answers

- denmch
- February 21, 2016 at 2:31 am
- 0 votes
0
This is happening because your list items have variable height. A quick fix would be to set a height of about 210px on each which should cover the added height from wrapped text:
```
.nvgallery ul li {
  height: 210px;
}
```
Test and adjust as needed.

The other fix, which is evidently necessary at first glance, is that your floats aren’t clearing properly so that in some viewports the H3 tags end up appearing as though in-line with your images (which are floating to the left of the headlines).

If you set a rule to clear:both on H3, this problem is cleared up as well:
```
h3 {
  clear: left;
}
```
Login or Signup to reply.

- hxlnt
- February 21, 2016 at 2:34 am
- 0 votes
0
You will likely want to edit your code so that it does not include { float: left; } on the li elements. Instead, try setting the li elements as inline blocks with { display: inline-block; }. You’ll need to adjust the alignment of the li items a bit, but this should solve your issue.

An answer with JSFiddle sample code is available at: https://stackoverflow.com/a/11812316/5953701

Login or Signup to reply.

- tao
- February 21, 2016 at 2:47 am
- 0 votes
0
Solution 1 (hide excess content to keep equal heights)

You can avoid this behavior by not allowing your <h5>s in your <li>s to wrap, using the CSS below. I also applied this rule to the descriptions (<p>s), in case you might add elements with longer descriptions in the future:
```
.nvgallery li h5, .nvgallery li p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
```
jsFiddle
(Note: I didn’t add all the CSS from your website, only the relevant parts for this issue).
If you want to display inline-block elements as grid, the condition is that all elements are equal in height. If one element is higher than the following ones, it will create a small floating point (a corner) where the browser will start a new (shorter) row.

Solution 2 (allow unequal heights)

Flexbox.
```
.nvgallery ul.row {
  display:-webkit-box;
  display:-webkit-flex;
  display:-moz-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}
```
jsFiddle
Now you can have li’s of unequal heights and they will all play nicely.
Login or Signup to reply.