What am I doing wrong here ? html and css

Question

Okay here is the desired result:

Here is the result I got:

The bottom row is in a straight line and not going in between the other containers like it need it be to be. I don't know how to go about getting the results I want like in the screenshot #1.

I hope someone can help me out. Thanks in advance.

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-size: 14px;
    background-color: #f2f2f2;
    font-family: 'Roboto', sans-serif;
}

h2 {
    font-size: 22px;
    font-weight: 300;
    padding-top: 7px;
}

.container {
    width: 948px;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    padding-top: 70px;
    padding-bottom: 50px;
}

.container ul {
    width: 100%;
    height: auto;
    list-style-type: none;
}

.container ul li {
    float: left;
    width: 300px;
    height: auto; 
    padding: 10px;
    margin-right: 24px;
    border-radius: 6px;
    display: inline-block;
    background-color: #fff;
}

.container ul li:nth-child(3n) {
    margin: 0;
}

.container ul li span {
    font-size: 13px;
    padding-bottom: 7px;
    text-decoration: underline;
}

.container ul li p {
    color: #333;
    text-align: justify;
    padding-bottom: 15px;
}

.thumbnail-con {
    width: 100%;
    height: 174px;
    border-radius: 3px;
    background-color: #f2f2f2;
}

<!DOCTYPE html>
<html>
<head>
    <title>SimpleRead</title>
    <link rel="stylesheet" type="text/css"href="styles/main.css">
</head>

<body>
    <div class="container">
        <ul>
            <li>
                <div class="thumbnail-con"></div>
                <br>
                <span>Business</span>
                <h2>Caterpillar to close Illinois plant, lay off 800 workers</h2>
                <br>
                
            </li>
            <li>
                <div class="thumbnail-con"></div>
                <br>
                <span>Celebrity</span>
                <h2>Nicki Minaj signs with modeling agency</h2>
                <br>
                <p>Prosecutors charged a white Baltimore racist Monday with murder as an act of terrorism for traveling to New York City and allegedly killing a 66-year-old black man with a sword.</p>
            </li>
            <li>
                <div class="thumbnail-con"></div>
                <br>
                <span>US</span>
                <h2>Racist ‘assassin’ indicted as terrorist in NYC murder of black man</h2>
                <br>
                <p>Prosecutors charged a white Baltimore racist Monday with murder as an act of terrorism for traveling to New York City and allegedly killing a 66-year-old black man with a sword.</p>
            </li>
            <li>
                <div class="thumbnail-con"></div>
                <br>
                <span>US</span>
                <h2>Racist ‘assassin’ indicted as terrorist in NYC murder of black man</h2>
                <br>
                <p>Prosecutors charged a white Baltimore racist Monday with murder as an act of terrorism for traveling to New York City and allegedly killing a 66-year-old black man with a sword.</p>
            </li>
            <li>
                <div class="thumbnail-con"></div>
                <br>
                <span>US</span>
                <h2>Racist ‘assassin’ indicted as terrorist in NYC murder of black man</h2>
                <br>
                <p>Prosecutors charged a white Baltimore racist Monday with murder as an act of terrorism for traveling to New York City and allegedly killing a 66-year-old black man with a sword.</p>
            </li>
            <li>
                <div class="thumbnail-con"></div>
                <br>
                <span>US</span>
                <h2>Racist ‘assassin’ indicted as terrorist in NYC murder of black man</h2>
                <br>
                <p>Prosecutors charged a white Baltimore racist Monday with murder as an act of terrorism for traveling to New York City and allegedly killing a 66-year-old black man with a sword.</p>
            </li>
            
        </ul>
        
    </div>
</body>

</html>

No crystal balls available.. Try adding the relevant html/css/js — Gabriele Petrioli, Apr 01 '17 at 23:34
You could use columns but then they would go top/down and then left/right so 2nd would be below 1st etc.. Otherwise you need to use some javascript. [masonry](http://masonry.desandro.com/) seems a good candidate. — Gabriele Petrioli, Apr 01 '17 at 23:46
Possible duplicate of [How to Create Grid/Tile View with CSS?](http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css) — domsson, Apr 01 '17 at 23:50

score 0 · Answer 1 · edited Jun 22 '22 at 08:01

0

That layout is called the Masonry Grid. It can be achieved using CSS grid columns but it is quite a muddled task, i would recommend that you use a jQuery plugin like this one.

Hope this helps :)

edited Jun 22 '22 at 08:01

Glorfindel

21,988
13
81
109

answered Apr 02 '17 at 17:03

Sudipto

440
2
8

What am I doing wrong here ? html and css

1 Answers1