Floating Images and alignment on web page

Question

I am having trouble aligning my images properly within my gallery when using the float: left; alignment of my list items.

For some reason, it will not align all of my images next to each other. Instead, it will align the top row correctly with two of the gallery images next to each other, then on the third image it will not work properly leaving an empty space. Then on images 4-5 it will pick back up and align them properly next to each other. Does anyone know why this would be?

Answer 1 · 2014-03-23T18:12:36Z

March 23, 2014 6:12pm

Can you post your code?

Answer 2 · 2014-03-23T18:55:08Z

March 23, 2014 6:55pm

Thanks for the help Diane! Below is my CSS

/*********************** GENERAL ************************/ body { font-family: 'open sans', sans-serif; }

wrapper {

max-width: 940px; 
margin: 0 auto; 
padding: 0 5%;

}

a { text-decoration: none; }

img { max-width: 100%; }

/*********************** HEADING ************************/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center;
margin: 0;

}

h1 { font-family: 'changa one', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/*********************** NAVIGATION ************************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: 800; padding: 50px 10px; }

/*********************** FOOTER ************************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

.social-icon { width: 20px; height: 20px; margin: 0 5px; } /*********************** PAGE: PORTFOLIO ************************/

gallery {

margin: 0; 
padding: 0; 
list-style: none;

}

gallery li {

float: left;
width: 45%; 
margin: 2.5%; 
background-color: #f5f5f5; 
color: #bdc3c7;

}

gallery li a p {

margin: 0; 
padding: 5%; 
font-size: 0.75em; 
color: #bdc3c7;

}

/*********************** COLORS ************************/

/* site body */

body { background-color: #fff; color: #999; }

/* green header / header { background: #6ab47b; border-color: #599a68; } / logo text */ h1, h2 { color: #fff; }

/* links */ a { color: #6ab47b; }

/* nav background on mobile */ nav { background: #599a68; }

/* nav link */ nav a, nav a:visited { color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }

Answer 3 · 2014-03-23T19:22:02Z

March 23, 2014 7:22pm

This looks fine - I can't see any issues with it (I'm assuming you have the # before wrapper, gallery, etc). The problem may be with your html code. Can you post that as well?

Answer 4 · 2014-03-23T19:34:42Z

March 23, 2014 7:34pm

Oh thanks for checking it out, Diane. I really appreciate it. I was starting to go mad looking for errors. hahah. Below you can find my HTML code. I believe I had done everything right, but I may have made a mistake somewhere in there. I am still new to this stuff. Thanks!

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Devon Tackels | Photographer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Devon Tackels</h1> <h2>Photographer & Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/1.jpg"></a> <img src="img/1.jpg" alt=""> <p>Brooke's Wedding Day</p> </li> <li> <a href="img/2.jpg"></a> <img src="img/2.jpg" alt=""> <p>Sam's Headshot</p> </li> <li> <a href="img/3.jpg"></a> <img src="img/3.jpg" alt=""> <p>The Sun sets over Oakland, CA. </p> </li> <li> <a href="img/beach.jpg"></a> <img src="img/beach.jpg" alt=""> <p>A sunny day in Outerbanks, NC.</p> </li> <li> <a href="img/6.jpg"></a> <img src="img/6.jpg" alt=""> <p>The Brooklyn Bridge</p> </li> <li> <a href="img/7.jpg"></a> <img src="img/7.jpg" alt=""> <p>Washington, DC Metro </p> </li> </ul> </section> <footer> <a href="http://twitter.com/thetackels"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a> <a href="http://facebook.com/dtackels"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a> <p>© 2014 Devon Tackels.</p> </footer> </div> </body> </html>

Answer 5 · 2014-03-23T20:19:14Z

March 23, 2014 8:19pm

you didn't include the code for the gallery images, so I'm not sure what's going on. I'm guessing that the third image has a mistake in the code, and that's why it's not showing up. Check it against the other image html.

Answer 6 · 2014-03-23T20:28:18Z

March 23, 2014 8:28pm

I guess I cannot post the code in entirety here, there must be a character limit to the answer text box.

After reviewing the html I can't see any difference in the code of the gallery images. It just seems to float some images, and not all.

Answer 7 · 2014-03-23T20:45:04Z

March 23, 2014 8:45pm

you have to wrap the code in 3 backticks: ``` on the line before and the line after the code.

Answer 8 · 2014-10-25T17:36:07Z

October 25, 2014 5:36pm

Hi Diane! I'm having the same problem; image number six does not float properly. Can you take a look at my index.html?

<!DOCTYPE html> <!-- ALWAYS FIRST, NO SPACES BEFORE -->
<html>
  <head> <!-- Contains META information -->
    <meta charset="utf-8">
    <title>Brian Yu | Programmer and Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Roboto:400,400italic,700,700italic,900' rel='stylesheet' type='text/css'> <!-- PUT THE FONTS BELOW NORMALIZE, ABOVE CUSTOM CSS-->
    <link rel="stylesheet" href="css/main.css">
    <link rel="icon" href="img/mail.png">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Brian Yu</h1>
        <h2>Programmer and Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Photoshop practicing.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Creating an 80s vibe.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>More Photoshop experimentation.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Repetition of shapes.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com/"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2014 Brian Yu</p>
      </footer>
    </div>
  </body>  
</html>

Welcome to the Treehouse Community

Looking to learn something new?

Devon Tackels

Devon Tackels

Floating Images and alignment on web page

8 Answers

Diane Houghton

Diane Houghton

Devon Tackels

Devon Tackels

wrapper {

logo {

gallery {

gallery li {

gallery li a p {

Diane Houghton

Diane Houghton

Devon Tackels

Devon Tackels

Diane Houghton

Diane Houghton

Devon Tackels

Devon Tackels

Diane Houghton

Diane Houghton

Brian Yu

Brian Yu