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

Gordia Smith
Gordia Smith
2,238 Points

Gallery is floating but not sizing correctly

So my Gallery is floating, I have images next to one another but no space between them. also they are narrow for width, but I believe still their full length.

And last but not least, my footer isn't at the bottom of the page some how. Its showing up towards the top of the 5th (last) picture.

I have gone back through the code, compared it to others. I must be glazing over what the problem is when comparing. Here are snapshots if I did them right.

http://w.trhou.se/wroqwizqk1

http://w.trhou.se/o2u47vs8fm

<!DOCTYPE html>

<html> <head> <meta charset="utf-8"> <title>Gordia Smith | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,700,800,400' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <H1>Gordia Smith</H1> <h2>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>Playing with blending modes in Photoshop.</p>
        </a>
      </li>     

      <li>
        <a href="img/numbers-06.jpg">
          <img src="img/numbers-06.jpg" alt="">
          <p>Trying to create an 80's style of glows.</p>
        </a>
      </li>

      <li>
        <a href="img/numbers-09.jpg">
          <img src="img/numbers-09.jpg" alt="">
          <p>Drips created using Photoshop brushes.</p>
        </a>
      </li>

      <li>
        <a href="img/numbers-12.jpg">
          <img src="img/numbers-12.jpg" alt="">
          <p>Creating shapes using repetition.</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; 2015 Gordia Smith.</p>
  </footer>
</div> 

</body>

</html>

5 Answers

TJ Egan
TJ Egan
14,420 Points

Well, for the footer, make sure you place a clear div before the opening footer tag.

</section>

<div class="clear"></div>

<footer>

In your CSS, add this

.clear:after {
   clear: both;
}
Gordia Smith
Gordia Smith
2,238 Points

Will give that a try, thanks TJ! Also on the Gallery for the sizing portion, after looking at my 'max-width' line about 50 times it finally clicked in my head I had an ' =' instead of a ' : '. So at least that part is working now!! Will go try your suggestion now, thank you.

Gordia Smith
Gordia Smith
2,238 Points

Odd I must have done TJ's wrong or there is a bigger difference of some kind. I used this from another question on here for the css sheet.

footer { clear: both; }

Seems to have fixed it.

Thank you both for helping its much appreciated. I am sure I will be back with more issues sooner than later.

TJ Egan
TJ Egan
14,420 Points

Glad it's working! Don't hesitate to contact me if you have more problems

  • @tj_egan
Mitchell Springer
Mitchell Springer
2,576 Points

Assuming all your html is there, you are missing html, head, and body tags. Try this:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gordia Smith | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,700,800,400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
  <a href="index.html" id="logo">
    <H1>Gordia Smith</H1>
    <h2>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>Playing with blending modes in Photoshop.</p>
        </a>
      </li>     

      <li>
        <a href="img/numbers-06.jpg">
          <img src="img/numbers-06.jpg" alt="">
          <p>Trying to create an 80's style of glows.</p>
        </a>
      </li>

      <li>
        <a href="img/numbers-09.jpg">
          <img src="img/numbers-09.jpg" alt="">
          <p>Drips created using Photoshop brushes.</p>
        </a>
      </li>

      <li>
        <a href="img/numbers-12.jpg">
          <img src="img/numbers-12.jpg" alt="">
          <p>Creating shapes using repetition.</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; 2015 Gordia Smith.</p>
  </footer>
</div> 
</body>
</html>
Gordia Smith
Gordia Smith
2,238 Points

I do have the tags, they just weren't in my snapshot for whatever reason. Checked against what you put in Mitchell looks the same, granted I could be missing something obvious again. Also I tried what you said TJ and that didn't seem to work either.

I will keep messing with it.

TJ Egan
TJ Egan
14,420 Points

Hmm...

.clear:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Try that?

http://stackoverflow.com/questions/8554043/what-is-clearfix