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
Kayla Montgomery
2,197 Pointsfloat: left;
I am not sure how to make my images float. They are still stacking when I refresh my page.
/***********************
PAGE: PORTFOLIO
************************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width 45%;
margin: 2.5%;
background color: #f5f5f5;
color: #bdc3c7;
}
<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>you can add in your own captions here</p></a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Add own captions</p></a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Captions</p></a>
</li>
</ul>
Kayla Montgomery
2,197 PointsI have added more css since this morning, but here's my file. Thank you so much for the help!!
/***********************
GENERAL
************************/
body{
font-family: 'Signika', sans-serif;
}
#wrapper {
max-width:940px;
margin: 0 auto;
padding: 0 5%;
}
a{
text-decoration:none;
}
img {
max-width: 100%;
}
h3 {
margin: 0 0 1em 0;
}
/***********************
HEADING
************************/
header {
float:left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width:100%;
}
#logo {
text-align:center;
margin:0;
}
h1 {
font-family: 'Ultra', serif;
margin: 15px; 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2{
font-size:0.75em;
margin: -5px 0 0;
font-weight: normal;
}
/***********************
NAVIGATION
************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding 0;
}
nav li {
display: inline-block;
}
nav a{
font-weight: 800;
padding: 15px 10px;
}
/***********************
FOOTER
************************/
footer{
font-size:0.75em;
text-align: center;
clear:both;
padding-top: 50px;
color: #ccc;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
/***********************
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;
}
/***********************
PAGE: ABOUT
************************/
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/***********************
COLORS
************************/
/* site body*/
body {
background-color:#fff;
color: #999;
}
/*green header*/
header {
background: #6ab47b;
border-color: #599a68;
}
/*nav background on mobile devices*/
nav {
background:#599a68;
}
/*logo text*/
h1, h2 {
color: #fff;
}
/*links*/
a{
color:#6ab47b;
}
/*nav link*/
nav a, nav a:visited {
color:#fff;
}
/*selected nav link*/
nav a.selected, nav a:hover {
color: #32673f;
}
Rich Bagley
25,869 PointsHi Kayla,
I just copied your code in to CodePen and it displayed the images next to each other. When I resized the window smaller it moved them on top of each other. Is this not happening for you?
-Rich
Kayla Montgomery
2,197 PointsIt's not, the images are never in two columns on my machine. I will try using a different computer (as this one keeps crashing on me anyways) and rest easy at least knowing I don't have a missing semicolon somewhere. I haven't used CodePen before, thank you for the tip!
2 Answers
Jonathan Grieve
Treehouse Moderator 91,253 PointsHi Kayla,
Welcome to Treehouse. :)
I fixed up your forum code to make a little bit clearer. Floats are an interesting part of web design. They take elements out of what is called "normal flow". That is as you suggest, elements stacking on top of each other. That said, elements set to "inline" will also stack side by side because they're only as big as the content they have contained in them.
You'll learn about floats later on in your treehouse education but without looking at the video I'd suggest using display: inline-block rather than float: left as this will ensure the elements stack nicely side by side and work well with responsive web design.
Kayla Montgomery
2,197 PointsThank you, I couldn't get the CSS to show up properly. The video is trying to show how to use the float property, so I would like to be able to figure it out. I was messing with the colors in the "#gallery li" and found that none of them were showing up on the webpage either, its as if that entire rule doesn't exist...
Kayla Montgomery
2,197 PointsI had a colon missing in the width underneath the float:left! Thank you so much for looking into my code and helping me out, Rich!
Rich Bagley
25,869 PointsAh well spotted. No problem anyway! I didn't really do anything and it probably didn't help I've just realised I had misread how you needed it to display :D
Glad you managed to sort it!
-Rich
Rich Bagley
25,869 PointsRich Bagley
25,869 PointsHi Kayla,
It's odd that your code isn't having the desired effect as it looks correct. It may be simply caching and so not showing you the latest version of the code, or it could be due to a missing semi colon / closing bracket above.
If you're still experiencing problems, could you post the rest of your CSS file code please and we can take a look.
Thanks :)
-Rich