Float: left; is not working :(

Question

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

Answer 1 · 2016-01-10T15:35:33Z

January 10, 2016 3:35pm

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

Answer 2 · 2016-01-10T17:33:42Z

January 10, 2016 5:33pm

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.

Answer 3 · 2016-01-10T10:25:52Z

January 10, 2016 10:25am

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

Answer 4 · 2016-01-10T12:27:07Z

January 10, 2016 12:27pm

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

Welcome to the Treehouse Community

Looking to learn something new?

Ellis Mendoza

Ellis Mendoza

Float: left; is not working :(

4 Answers

Richard Nicholls

Richard Nicholls

Ellis Mendoza

Ellis Mendoza

Lee Geertsen

Lee Geertsen

Don Crowley

Don Crowley

FLOATS

MORE READING: