CODEWITHSUNDEEP
htmlcss
Dingo Bruce
Dingo Bruce

Reputation: 405

Best way to layout images in a list using CSS

I'd like to layout a list of images using css into a grid as below:

What I'm trying to acheieve

The HTML code I have for the list is:

<ul id='feat-products'>
    <li><img id='feat-product-1'></li>
    <li><img id='feat-product-2'></li>
    <li><img id='feat-product-3'></li>
    <li><img id='feat-product-banner'></li>
</ul>

And my CSS is:

#feat-products ul {
    width: 1000px;
    height: 400px;
}    
#feat-products li {
    display: inline-block;
    border: solid 1px;
}
#feat-products li:nth-child(1) {
    width: 500px;
    height: 400px;
}
#feat-products li:nth-child(2) {
    width: 250px;
    height: 200px;
}
#feat-products li:nth-child(3) {
    width: 250px;
    height: 200px;
}
#feat-products li:nth-child(4) {
    width: 500px;
    height: 200px;
}

Unfortunately this is what I am getting from the code:

Layout my code is giving me

What is the best way to lay this out using CSS? I have been able to mess around and almost achieve what I want using negative margins, but can't imagine this is good practice. Would appreciate any assistance!

Thanks,

DB

Upvotes: 1

Views: 59

Answers (1)

sorrow poetry
sorrow poetry

Reputation: 413

edit your css like this add float left to li child 1

#feat-products ul {
    width: 1000px;
    height: 400px;
}    
#feat-products li {
    display: inline-block;
    border: solid 1px;
}
#feat-products li:nth-child(1) {
    width: 500px;
    height: 400px;
  float:left; //add this to your css
}
#feat-products li:nth-child(2) {
    width: 250px;
    height: 200px;
}
#feat-products li:nth-child(3) {
    width: 250px;
    height: 200px;
}
#feat-products li:nth-child(4) {
    width: 500px;
    height: 200px;
}

Upvotes: 1

Related Questions