Displaying a blog feed, in two unequal columns - Can it be done with Pure CSS? or JS needed?

Question

I'm trying to put style a 4 post feed for a homepage blog. The layout in the mock ups is this:

The feed comes in as a simple ul with li elements.

I've played around with a fiddle

ul, li{
    list-style-type:none;
    padding:0;
    margin:0;
}

li{
    width:25%;
    display:inline-block;
    margin-left:15px;
    vertical-align:top;
}
li:first-child{
     width:60%;
    margin-left:0px;
    float:none;
}
li img{
     width:100%;   
}

<ul class="articles">
<li>

    <img src="https://placehold.it/465x300" />
                    <div class="articleinfofeat">Published on 10/24/14 </div>                    
                    <h2>The stock market of today is different, this is our in-depth look into the inner workings of the market</h2>
                    <p>Cu aliquando neglegentur usu, in sed ridens deserunt. Cum ut graeco torquatos, te sea sonet invenire. Ea vim cetero suavitate, veri solum mandamus sit no. Sed quas propriae ut, pri mucius dignissim suscipiantur te, ad vis ubique putant. Mei timeam lucilius adipiscing id.</p>
                    <div class="keepreadingfeat">
                     <a href="#">Keep Reading</a>
                    </div>
     
</li>    


<li>

    <img src="https://placehold.it/165x75" />
                    <div class="articleinfo">Published on 10/24/14</div>
                    <h3>This Is Noise This Is Noise This Is Noise 1</h3>
                    <div class="keepreadingbtn">
                    <a href="#">Keep Reading</a>
                    </div>
          
</li>
<li>

    <img src="https://placehold.it/165x75" />
                    <div class="articleinfo">Published on 10/24/14</div>
                    <h3>This Is Noise This Is Noise This Is Noise 2</h3>
                    <div class="keepreadingbtn">
                    <a href="#">Keep Reading</a>
                    </div>
        
</li>
<li>

    <img src="https://placehold.it/165x75" />
                    <div class="articleinfo">Published on 10/24/14</div>
                    <h3>This Is Noise This Is Noise This Is Noise 3</h3>
                    <div class="keepreadingbtn">
                    <a href="#">Keep Reading</a>
                    </div>

</li>


</ul>

So I believe I could figure out a way to do it in JS, but I feel like this should be possible to do with CSS. I've been racking my brain

CSS3 columns only allow me to do equal width columns. Display inline on certain elements - Floating the last 3 children stacks them...

Can anyone think of anything. If not i'll attempt a js solution.

Answer 1

It looks like you are pretty close you just have to float the first li child left. You might want to play with margins a bit to see if looks ok to you.

Here is the updated css:

   ul, li{
    list-style-type:none;
    padding:0;
    margin:0;
}

li{
    width:25%;
    display:inline-block;
    margin-left:15px;
    vertical-align:top;

}
li:first-child{
     width:60%;
    margin-left:0px;
    float:left;/*added code*/
}
li:last-child{/*added code*/
    width:25%;
    margin-left:2.5%;
    margin-right:12.5%;
    float:right;
}



li img{
     width:100%;   
}

Answer 2

And here is the code that meets your specific needs jsFiddle

---

The below code is a base example to make it more reusable for everyone else.

ul,
li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ul {
    width: 50%;
    height: 300px;
    padding: 20px;
    background-color: red;
}

li {
    background-color: blue;
    width: 30%;
    height: 50px;
    margin-bottom: 20px;
   float: right;  
    clear: right;
}

li:first-child {
    float: left;
    width: 60%;
    height: 50px;
    margin: 0;
    background-color: yellow;
}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

Answer 3

Float: left, min-height: 1000px (or 5000px or zillion pixies), column-width separte exmp: column-width: 465px on ::first-cild

Like this ?

li:first-child {
    -moz-column-width: 465px;
    -webkit-column-width: 465px;
    column-width: 465px;
    width: 465px;
    min-height: 1000px;
    float: left;
    border: 4px solid pink;
    margin-right: 20px;
}
li {
    -moz-column-width: 165px;
    -webkit-column-width: 165px;
    column-width: 165px;
    display:inline-block;
}

<ul class="articles">
    <li>
        <img src="https://placehold.it/465x300" />
        <div class="articleinfofeat">Published on 10/24/14</div>
         <h2>The stock market of today is different, this is our in-depth look into the inner workings of the market</h2>

        <p>Cu aliquando neglegentur usu, in sed ridens deserunt. Cum ut graeco torquatos, te sea sonet invenire. Ea vim cetero suavitate, veri solum mandamus sit no. Sed quas propriae ut, pri mucius dignissim suscipiantur te, ad vis ubique putant. Mei timeam lucilius adipiscing id.</p>
        <div class="keepreadingfeat"> <a href="#">Keep Reading</a>

        </div>
    </li>
    <li>
        <img src="https://placehold.it/165x75" />
        <div class="articleinfo">Published on 10/24/14</div>
         <h3>This Is Noise This Is Noise This Is Noise 1</h3>

        <div class="keepreadingbtn"> <a href="#">Keep Reading</a>

        </div>
    </li>
    <li>
        <img src="https://placehold.it/165x75" />
        <div class="articleinfo">Published on 10/24/14</div>
         <h3>This Is Noise This Is Noise This Is Noise 2</h3>

        <div class="keepreadingbtn"> <a href="#">Keep Reading</a>

        </div>
    </li>
    <li>
        <img src="https://placehold.it/165x75" />
        <div class="articleinfo">Published on 10/24/14</div>
         <h3>This Is Noise This Is Noise This Is Noise 3</h3>

        <div class="keepreadingbtn"> <a href="#">Keep Reading</a>

        </div>
    </li>
</ul>

Answer 4

This seemed to do it remove the float:none and add float:left to the li selector

ul, li{
    list-style-type:none;
    padding:0;
    margin:0;
}

li{
    width:25%;
    display:inline-block;
    margin-left:15px;
    vertical-align:top;
    float:left;
}
li:first-child{
     width:60%;
    margin-left:0px;
}
li img{
     width:100%;   
}