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

HTML How to Make a Website Styling Web Pages and Navigation Style the Image Captions

Ellis Mendoza
Ellis Mendoza
2,376 Points

Float: left; is not working :(

The pictures are not splitting into two columns. :( Please help me.

index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Ellis Mendoza | Student</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href='https://fonts.googleapis.com/css?family=Playfair+Display:900|Open+Sans:400,700,700italic,800,400italic' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css">     
        </style>
    </head>
    <body>
        <header>
            <a href="index.html" id="logo">
                <h1>Ellis Mendoza</h1>
                <h2>Student</h2>
            </a>
            <nav>
                <ul>
                    <li><a href="index.html" class="selected">Photos</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/SJK146SLR.jpg">
                            <img src="img/SJK146SLR.jpg" alt="" >                   
                            <p>SJK146SLR - Solar String Lights</p>
                        </a>
                        <a href="img/SLC104A.jpg">
                            <img src="img/SLC104A.jpg" alt="" ">
                            <p>SLC104 - Solar Driveway Markers</p>
                        </a>
                        <a href="img/SLC108A.jpg">
                            <img src="img/SLC108A.jpg" alt="">
                            <p>SLC108A - Solar Mosaic Globe</p>                 
                        </a>
                        <a href="img/SLC192.jpg">
                            <img src="img/SLC192.jpg" alt="">
                            <p>SLC192 - Solar USA Flag</p>
                        </a>
                        <a href="img/SOT102.jpg" alt="">
                            <img src="img/SOT102.jpg">
                            <p>SOT102 - Solar Angel Stake</p>
                        </a>
                        <a href="img/SOT162.jpg">
                            <img src="img/SOT162.jpg" alt="">
                            <p>SOT162 - Solar Cross Stake</p>
                        </a>
                    </li>
                </ul>
            </section>
            <footer>
                <p>&copy; 2016 Ellis Mendoza.</p>
            </footer>
        </div>
    </body>

</html>
main.css
/*****************************
GENERAL
******************************/
body {
    font-family: 'Open Sans', sans-serif;

}


#wrapper {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 5%
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}



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

#logo {
    text-align: center;
    margin:0;
}

h1 {
    font-family: "Playfair Display", serif;
    margin: 0;
    padding: 25px 0 0;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em;

}

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

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

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

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

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



/*****************************
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
}

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

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

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

/* logo text */
h1, h2 {
    color: #fff;
}

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

4 Answers

In your unordered list you don't have any individual list items. Add an opening li and a closing /li to each image, li before the <a and </li after the closing</a

Ellis Mendoza
Ellis Mendoza
2,376 Points

Thank you all for the help! I really appreciate them all! :) RIchard Nicholls found the error. I didn't notice that I didn't put <li> on the other items.

To be able to use 'float' on an object u need to give it a position of absolute

gallery li {
  position: absolute;
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

You should not use position absolute (which is something you should use anyway as a last resort). Try and debug what is happening in your browser console.

FLOATS

You are using a list so do #gallery { display: block; } then #gallery li { float: left; }. You may need to add clear: left or clear: both to the next html element on the page after #gallery.

Good luck

MORE READING:

FLOATS 101 on A List Apart (ALA is a really great website) - http://alistapart.com/article/css-floats-101 All about floats on CSS TRICKS (also a really great website) - https://css-tricks.com/all-about-floats/ All the basics www.w3schools.com - See http://www.w3schools.com/cssref/pr_class_float.asp about floats and use the Try it yourself button to edit live