It looks as though you are missing some syntax in a few areas.

gallery li (for example) in your HTML you have an ul with an id of gallery, yet your CSS is just gallery li {prop:value;}, the syntax should read #gallery li {prop:value;}

Also, it looks as though you have #page taking up your entire page. This (in my opinion) can lead to a lot of positional issues. I suggest re-writing your code to "wrap" contents within a div that pertain to the content and is named semantically; i.e,: "heading, main-nav, main-content" etc.

Resulting in:

<div id="main-nav">
  <ul>
    <li></li>
  </ul>
</div>
<div id="main-content">
  <h2></h2>
  <ul>
    <li>
      <a href="">
        <img src="" alt="" />
          <p>
          </p>
      </a>
    </li>
  </ul>
</div>
<div id=footer>
  <p></p>
</div>

As for the float, when given a height and width to the div containing the images, you can better float the images. Someone please correct me if I'm wrong, however, when floating an object, the top left corner of your element is placed at 0,0 (x,y) opposed to an inline-block element that will have a variable y, and an x dictated by width.

I hope that gives a little more insight.

Just a little helpful advice as well, there is a link to a "Markdown cheatsheet" that will give you documentation as to make your code more readable to others to help you. When you use the backtick ` three times to open your code, and 3 times to close your code, the markup will be more legible for everyone to help you :)

( ` * 3) remove the parenthesis and spaces. .paste { your: code; between: thebackticks; }

( ` * 3 ) remove the parenthesis and spaces.

:)

I think what you are referring to is tiled gallery, a mosaic of some form. Kind of like tumblr, or a pinterest board of div's/images. There are JavaScript functions that can dynamically scale images within a gallery, and then lightbox them.

My suggestion to you is to follow verbatim the lessons, then branch out by using borders for divs with no images. Play with these for a while and you will start to understand the behavior of CSS positioning.

<div id="parentA" class="box"> Parent A
  <div id="childA_1" class="box">Child 1</div>
  <div id="childA_2" class="box">Child 2</div>
</div>
<div id="parentB" class="box"> Parent B
  <div id="childB_1" class="box">Child 1</div>
  <div id="childB_2" class="box">Child 2</div>
</div>

These 2 divs and their children have helped me out SO MUCH. Make more and float them, etc.

You got this!