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
Gordia Smith
2,238 PointsGallery 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.
<!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>© 2015 Gordia Smith.</p>
</footer>
</div>
</body>
</html>
5 Answers
TJ Egan
14,420 PointsWell, 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
2,238 PointsWill 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
2,238 PointsOdd 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
14,420 PointsGlad it's working! Don't hesitate to contact me if you have more problems
- @tj_egan
Mitchell Springer
2,576 PointsAssuming 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>© 2015 Gordia Smith.</p>
</footer>
</div>
</body>
</html>
Gordia Smith
2,238 PointsI 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
14,420 PointsHmm...
.clear:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Try that?