Question

Quick question, I need help and have no idea what to do, because I know nothing about html/css and got this as a bonus task along with other programming things.

What I have:

What I would like to have:

Here is css code

.offer-small { width: 278px; height: 209px; position: relative; margin-bottom: 25px; }
.offer-small img { width: 278px; height: 209px; }
.offer-small .mask { width: 278px; height: 209px; cursor: pointer; position: absolute; top: 0; left: 0; background: url('../images/photo-small-mask.png'); }
.offer-small .desc { display: none; font-size: 10pt; width: 258px; height: 189px; padding: 10px; position: absolute; top: 0; left: 0; background: url('../images/photo-small-black-transparent.png'); color: white; text-shadow: 1px 1px #000000}
.offer-small .desc p { font-size: 9pt; color: #f2f0e4; }
.offer-small .desc table.compare { width: 160px; height: 48px; margin: 0 auto 0 auto; background: url('../images/offer-table.png'); color: #f2f0e4; }
.offer-small .desc table td { text-align: center; padding-bottom: 10px; }
.offer-small .desc table td.small { font-size: 8pt; }
.offer-small .title { width: 258px; background: url('../images/offer-transparent.png'); padding: 2px 10px; position: absolute; top: 120px; left: 0;  }
.offer-small .title strong { font-size: 9pt; color: #ffffff; }
.offer-small .title small { font-size: 8pt; color: #f2f0e4; }
.offer-small .title small strong { font-size: 8pt; color: #f2f0e4; }
.offer-small .view-offer { position: absolute; top: 160px; left: 150px; }

.view-offer { display: block; width: 120px; height: 44px; background: url('../images/button-view-offer.png'); }
.btnSendOrder { width: 260px; height: 75px; border: 0; background: url('../images/button-send-order.png'); cursor: pointer; }
.toLeft { float: left; margin-right: 25px; }

Html/smarty code:

        {if $random}{foreach item=item from=$random}

                <div class="offer-small">
                    <img src="{$smarty.const.APP_URL}/userfiles/photos/{if $item.item_photo}s_{$item.item_photo}{else}blank_small.jpg{/if}" alt="" />
                    <div class="desc">
                        <strong>{$item.item_name|truncate:30}</strong>
                        <p>{$item.item_short_description|truncate:120}</p>
                        <p align="right"><a href="{$smarty.const.APP_URL}oferta/{$item.item_category}/{$item.item_title}" class="view-offer"></a></p>
                    </div>
                    <div class="title">
                        <strong>{$item.item_name|truncate:30}</strong><br/><small>Cena teraz: <strong>{$item.item_cost_now|money} zł</strong> zamiast <strong>{$item.item_cost_before|money} zł</strong></small><br/><br/>
                        <strong>OSZCZĘDZASZ <big>{$item.item_cost_before-$item.item_cost_now|money}</big> zł</strong>
                    </div>
                </div>

                {/foreach}{/if}

Tips are welcome too.
I mean I can handle making grid if someone will show me how to break this stupid list.

Answer 1

An easy way is to just float the divs of class .offer-small left:

.offer-small { 
width: 278px; 
height: 209px; 
position: relative; 
margin-bottom: 25px; 
float:left;
}

As long as you have them all within a container element with a fixed width, they should fit next to each other nicely, wrapping to the next line automatically.