List items need to have the same height

HTML & CSS
1

I have two list items in a row, both holding images. The first one has a width of 30% with a right margin of 5% and the second one has a width of 65% without any margins. How do I get these list items have the same height without declaring a height for the list items?

Thank you in advance

2

It would help to see your HTML and CSS. It’s rather difficult to visualise without this.

3

Hi gandalf. Thanx for the reaction. This is what I have

CSS

.gallery 
{
    width: 100%;
    list-style: none;
    word-spacing: -1em;    
}

.gallery li 
{
    width: 30%;
    margin-right: 5%;
    display: inline-block;
    overflow: hidden;
    word-spacing: normal;
    border: solid 1px #D7DADD;
    word-spacing: normal;
}

.gallery li.wide 
{
    width: 65%;
    margin: 0;        
}

HTML

<ul class="gallery">   
    <li>
        <img src="/images/model_fotos/m1.jpg"alt=""/>

        </li>
        
        <li class="wide">
           <img src="/images/model_fotos/m4.jpg"alt=""/>            
        </li>   
</ul>
4

So there are only two items in the list? That should make it easier.

5

Hi Sam thanks. Yes there are indeed

6

In that case display: table/table-cell should do it on the .gallery and .gallery li respectively .

7

Or just setting the .gallery to display: flex;, which may be a bit more, er, flexible especially with responsiveness in mind.

8

Hi Sam thanks again. I actually try to avoid using the table/table-cell approach because of the margins.

9

Flex is looking good then.

10

Hi m3g. Thanks for the responce. That is what i was thinking after all and yes that is probably the best way to go for. Thanks again

@system thank you for thinking along

11

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