Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Devon Tackels
Devon Tackels
1,221 Points

Floating Images and alignment on web page

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?

8 Answers

Can you post your code?

Devon Tackels
Devon Tackels
1,221 Points

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; }

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?

Devon Tackels
Devon Tackels
1,221 Points

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>

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.

Devon Tackels
Devon Tackels
1,221 Points

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.

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

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>