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

Posted by Robyn Franzen
Robyn Franzen
781 Points

I have set float: 45%; but my images are showing up in a single column instead of two. What am I doing wrong?

/********************** PAGE: PORTFOLIO ***********************/

gallery {

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

gallery li {

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

2 Answers

robertm
robertm
13,570 Points
robertm
robertm
13,570 Points

Have you tried giving the parent 'gallery' div a width?

Robyn Franzen
Robyn Franzen
781 Points

In going back to try to do this, I found a typo in my code, thank you!

Noah Savage
Noah Savage
1,512 Points
Noah Savage
Noah Savage
1,512 Points

After staring at my HTML and CSS files for ETERNITY, I discovered that I had assigned the gallery id incorrectly. My CSS was verbatim from the videos and other people's examples, so I won't show it.

In HTML

<div id="wrapper">
  <section>
    <ul id:"gallery">     <<<<===========  Here was my problem! It should be <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>

The <ul id:"gallery"> will apparently allow CSS to select the correct id in the HTML, but it won't apply the CSS formatting to ALL of the child <li> (list) elements in the <ul> (un-ordered list). SOOO CSS would apply the formatting to the first image and leave all the others the same, driving me nuts.

Hope this helps someone!