Question

I have created my own CMS, but my image overview is still messed up.
Currently it is looking like this:
happens: http://i47.tinypic.com/raaybt.jpg

I’m trying to achieve this result (made this picture with photoshop)
http://i47.tinypic.com/30ualbm.jpg

How can i achieve the result i posted above?
Here is my HTML code:

                   <div id="main-content">
                   <div class="tab-content default-tab" id="tab1">
                        <div class="notification information png_bg">
                            <a href="#" class="close"><img src="resources/images/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a>
                            <div>
                                Hieronder ziet u een overzicht van alle afbeeldingen die momenteel geupload zijn.
                            </div>
                        </div>

                        <div id="afbeeldingen">
                            <ul id="afbeeldingenlijst">
                                <li>
                                    <div class="afbeelding">
                                        <img src="http://placehold.it/150x150"/>
                                        <a href="#">Verwijderen</a>
                                    </div>
                                </li>

                                <li>
                                    <div class="afbeelding">
                                        <img src="http://placehold.it/150x150"/>
                                        <a href="#">Verwijderen</a>
                                    </div>
                                </li>
                            </ul>
                        </div>

                    </div></div>

and here is my css:

#main-content ul li {
    width:200px;
    float: left;
}

Thanks in advance (:

Answer 1

inside UL the elements are floated it causes 0px height of parent element, so you should have to clear that float for that add this css to your style sheet

    .clearfix {
      *zoom: 1;
    }

    .clearfix:before {
      display: table;
      content: "";
    }

    .clearfix:after {
      display: table;
      content: "";
      clear: both;
    }

and <ul class="clearfix">...</ul>

use this class for all parent element those having floated elements inside in that element(if needed)

and also add one more property to LI with existing properties to remove bullet points

li{
  ...
  ...
  list-style:none;
}

Or simply you could use

overflow: hidden; for parent element(i.e UL)