Responsive ul li

HTML & CSS
1

Hi,

So I have created a div in HTML :

<div id="mydiv">
  <ul>
    <li> Item 1 Pic</li>
    <li> Item 2 Pic</li>
    <li> Item 3 Pic</li>
  </ul>
</div>

And my css:

#mydiv ul ul{
  list-style-type: none;
  margin:0px; padding:0px;
}

#mydiv li {
  float: left;
  display:inline;
  width: WHAT % ?;
}

I want to be able to display the li items in equal width. There may be 4 or 5 items sometimes. So I cannot make it 25% or 20%.

What should I put for width: for mydiv li ?

EDIT: I dont want to use the UL - display: table and LI display: table-cell because if I add a caption for the image, the image size changes depending on the size of the caption.

Thanks a lot.

2

It’s not really clear why you don’t want that.

3

Thanks for your reply @ralphm.

I tried img width:85%.

But when I use display table and have something like:
<li><img src="image1"></img><br>Title for image 1</li>
<li><img src="image2"></img><br>Title for image 2 and more extra text and some more</li>

Here the image2 LI is bigger than the image1 and the list looks very uneven.

Thanks.

4

How many list items in the row? Are there always the same number of list items in the row? Are the images the same size in the list items? You have not included the width and height attributes so it’s hard to tell from your code. By the way, the <img> tag does not have a close tag. That’s invalid. Is the layout supposed to be responsive or fixed?

5

Ah, right. To force the table cells to stick to the width you set, you need to add table-layout: fixed to your UL.

(Also, as an aside, note that #mydiv ul ul{ } won’t apply to anything in the HTML you posted, as there’s no UL within a UL.)

6

If the number is going to vary, don’t set a width. Display table or flex-box will take care of the width for you, dividing it between the items.

Example using display table:-

Example using flex-box:-

I have seen this issue before with table-cell, but it does not seem to be affecting my example.
The problem can be seen here. Though this used to be OK in Firefox (when I made this) but failed in Chrome. Now it seems it fails in FF too. See 3rd picture example.
http://codepen.io/SamA74/pen/remwjm

7

You have .capfit set to width:1px which is the technique need to make the caption wrap at the size of he image but you also have the img at max-width:100% which effectively means 1px width. You would need to remove the max-width on the image or use a px value to allow this to work properly.

8

The weird thing is, this did work in FF when I first tried it. But it no longer does, must be an update.
I moved the max-width into the query where it belongs, for small screens, if the image were too big.
This is a later version where I tried some other methods. One uses absolute positioning, but is a bit of a hack because it uses a magic number in padding-bottom to clear the caption. And last is a failed attempt to do something with flex.

9

Yes Firefox used to do have some differences in their behaviour of cells etc so was probably updated at some time.

I haven’t tried this with flex but my first thoughts are that it won’t work as flex doesn’t really have a grid relationship as such and content will just push wide as required.

11

@ralphm , @SamA74 , @PaulOB : You guys are marvellous!!

Thanks a ton. I am able to keep the image at a fix level of the LI with table-layout: fixed. The only problem now is that the caption is occupying the entire LI area. When the width of the entire div increases, the images are aligned all good, but the long caption occupies the entire LI area. I want its entire width to be aligned with the image. How can I achieve this?

I tried creating a div in the LI and keeping the image and caption in that div and assigning width to the div, but its not working.

Thanks again!

12

thecoder777,

You’ve been shown at least 3 different ways of coding this. Please show us the code that you have chosen and are talking about now either via a “working page”, a CodePen, or a test site.

13

I got it @ronpat … Apologise for not trying enough. I wrapped the image and the caption in a div and gave that the max-width of 99%. Now the Caption fits the image properly.

I thank all of you !!

Have a nice weekend y’all!!

1 Like
14

Thank you for the feedback. Be sure to test your working page in several browsers and mobile devices if possible to be sure it is cross browser compatible.

Have a nice day.

15

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