html - How do you use CSS column / grid to setup a text and image collage layout? -

i using older skeleton css version, 16 column grid system. trying setup similar layout in picture.

http://imgur.com/siv2ayo

i pretty new css, using 2 containers (one inside another) proper method?

here sample code of been trying, not working out =(

<div class="container">    <div class="eight columns alpha">      <div class="image">        <img alt="" src="images/coffee.jpg">      </div>    </div>      <div class="eight columns omega">        <div class="container">        <div class="eight columns">          <img alt="" src="images/plate.jpg">        </div>          <div class="eight columns">          <img alt="" src="images/macaro.jpg">        </div>          <div class="text area">          <p class="quote">"one of favorite parts of using square register being able talk customers while swiping cards."</p>            <p class="name">norm mui, coffee foundry</p>        </div>      </div> <!-- 2nd container -->    </div>  </div> <!-- 1st container -->

thanks in advance.

i don't know css, maybe helps you:

html:

// class "columns" "block" (div) needs content. i've made css background-color, height , width.

// in div "columns create new "columns, numbered 1,2 , 3. i've floated text left , gived margin. first, second , third margin of 15px ( top, right, buttom , left ).

// in div column "columns" have made textarea margin of 15px. vertical-align top vertical align. display means needs in block, margin of 40% ( takes 40% of block).

 <div id="container">       <div class="columns">            <div class="eight-columns-1">         <img alt="" src="http://ww1.prweb.com/prfiles/2014/04/10/11752526/gi_134971_best-image-web-hosting.png">       </div>        <div class="eight-columns-2">         <img alt="" src="http://www.causingeffect.com/images/made/images/example/cow_100_100_c1.jpg">       </div>        <div class="eight-columns-3">         <img alt="" src="http://www.causingeffect.com/images/made/images/example/cow_100_100_c1.jpg">       </div>              <div class="textarea">         <p class="quote">"one of favorite parts of using square register being able talk customers while swiping cards."</p>          <p class="name">norm mui, coffee foundry</p>       </div>     </div>    </div> 

css:

.columns {background-color:yellow; width: 530px; height: 285px;}  .eight-columns-1 {float:left; margin: 15px;}  .eight-columns-2 {float: left; margin: 15px;}  .eight-columns-3 {float:left; margin: 15px 15px 15px 0px;}  .textarea {vertical-align:top; margin: 15px; display:inline-block; width: 40%;}