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

Posted December 23, 2015 9:17pm by

Need help fixing floating images.

There are 6 images on the page i'm trying to make appear in a 3x2 layout. The first 3 images appear correctly using the following:

.marketing,
    .search_page,
    .travelApp {
        width: 33%;
        padding: 10px;
        float: left;
    }

The second set of images however appear as one image than a large white space than two images to the right. If all the images where in line it would display correctly. I've tried a few display tweaks such as in-line but nothing seems to work. I have a similar error with my top image not floating left correctly with my header text. Would love any input.

.map,
.photoGallery,
.calculator {
        width: 33%;
        padding: 10px;
        float: left;
    }

https://github.com/nickhonegger/cssProject

December 28, 2015 3:48pm

You're welcome, Nick. :) Glad I could help.

7 Answers

December 27, 2015 6:55pm

There are two main ways I like to think about page layout when first looking at it. (1) Every element is a box. Page layout is just moving the boxes around the web page. (2) Before move the boxes around I look at the page in normal flow. Normal flow is always my starting point for laying out a page.

December 28, 2015 1:07am

Thank you so much! I'm going to re-watch some of those videos and brush up on css layout using some of the resources via the treehouse staff. For whatever reason clearfixes and image layout was giving me a huge trouble but your advice makes it super understandable.

This made my weekend thank you so much!!!

December 27, 2015 6:19pm

Hi Nick,

I went to your github page and taking a closer look at it. I just copied all the html and css onto my local server. I'm not done, but I did find a couple of syntax errors in your CSS. There is one extra } in about the middle of your CSS page. Also, you forgot to close off one of your @media queries with }. However, this did not resolve the issue. I'll post more when I have played with it some more.

Julie

P.S. You may want to watch the class CSS Basic Layouts. If you have already seen it watch it again, as the info the Guil teaches in that course will solve your issue.

December 27, 2015 6:41pm

Hi Nick,

I solved part of your issue. You have the photoGallery and the calculator wrapped in the tertiary div. I commented out the tertiary div and now your map, photo, and calculator are all on the same line.

Now, the element's underneath it are not behaving correctly. I'm betting it's fixed with the clearfix solution. I'll fix this new issue and get back with you.

<div class="map">
  <img src="images/portfolio-6.png">
  <h2>Map of Favorite Spots</h2>
  <p>This project uses mapping apis to plot points for my favorite spots in the city for a do-it-yourself
           walking tour.</p>
</div>
<!--<div class="tertiary col">-->

 <div class="photoGallery">
  <img src="images/portfolio-5.png">
  <h2>Photo Gallery</h2>
  <p>This project shows pictures from a recent trip to the viewer and allows them to easily navigate through
           photos.</p>
 </div>
 <div class="calculator">
  <img src="images/portfolio-4.png">
  <h2>Calculator</h2>
  <p>Someone can enter in the numbers they want, and press the big blue button and get the result.</p>
 </div>

<!--</div>-->

Julie

December 27, 2015 6:51pm

Hi Nick,

Here is how you resolve the element's below map, photogallery, and calculator moving up. The clearfix solution did work. Here is where you make the changes:

/* In your CSS add the following clearfix class: */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

<!--- In your html add the .clearfix class to the .portfolio div like so: -->
<div class="portfolio clearfix">

Julie

December 23, 2015 10:41pm

Try entering a clear: left; on the image that has a white space next to it.

Cheers!

December 25, 2015 4:00am

You always need to clear your floats. The best fix is the clearFix technique. Add the following class to each container element:

.clearfix:after { content: ""; display: table; clear: both; }

December 26, 2015 5:47pm

Whenever I add clear: X there is no change on the page. When I do it through the clear fix container element it takes all my content and pushes so far off the page nothing can be seen. For whatever reason no matter what the scenario the white space won't go away so the image order always is 1 image on one line than 2 on the other. Is there any other way to fix this?

December 26, 2015 5:52pm

could you copy and paste all of your coding?

December 27, 2015 3:25pm

Here is everything, if you have any ideas I would be extremely grateful!

<!DOCTYPE html> <html lang="en"> <title>Portfolio</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />

<head>

</head>

<body> <div class="nav"> <header class="main-header"> <h1 class="studentName">Student Name</h1> <ul class="main-nav"> <li><a href="#"> <strong>Home</strong></a></li> <li><a href="#"><strong>Portfolio</strong></a></li> <li><a href="#"><strong>Contact</strong></a></li> </ul> </header> </div> <div class="bio"> <div class="bio_image"> <img src="responsive_layout_v1/Images/responsive-layout-profile.png"> </div> <div class="bio_text"> <p>Hi! I'm a front-end developer who loves responsive design and css. I recently finished a degree in front-end web development at Treehouse and am excited to put all my skills to use!</p> </div>

</div>

<div class="portfolio"> <div class ="portfolio-heading"> <h3><strong>Portfolio</strong></h3> </div> <div class="marketing"> <img src="responsive_layout_v1/Images/portfolio-1.png"> <h2> Marketing Page</h2> <p>This project shows the front page of a markeitng website meant for a specific business I'm intrested in. </p> </div> <div class="search_page"> <img src="responsive_layout_v1/Images/portfolio-2.png"> <h2>Search Page</h2> <p>This project searches through a specific database to find information that the user is trying to look up.</p> </div>

<div class="travelApp">
    <img src="responsive_layout_v1/Images/portfolio-3.png">
    <h2>Travel App</h2>
      <p>This project compares travel times based on different transportation methods and tells you the best one.</p>
</div>

<div class="largePage2"> <div class="map clearfix"> <img src="responsive_layout_v1/Images/portfolio-6.png"> <h2>Map of Favorite Spots</h2> <p>This project uses mapping apis to plot points for my favorite spots in the city for a do-it-yourself walking tour.</p> </div>

<div class="tertiary col">
    <div class="photoGallery">
        <img src="responsive_layout_v1/Images/portfolio-5.png">
        <h2>Photo Gallery</h2>
          <p>This project shows pictures from a recent trip to the viewer and allows them to easily navigate through photos.</p>
      </div>
    <div class="calculator">      
        <img src="responsive_layout_v1/Images/portfolio-4.png">
        <h2>Calculator</h2>
          <p>Someone can enter in the numbers they want, and press the big blue button and get the result.</p>
      </div>
</div>

</div> </div>

<div class="contact_info"> <h3><strong>CONTACT</strong></h3> <p>If you're interested in chatting or want more information about what I've been working on, I'd love to hear from you!</p>

<p>Phone <strong>+1 (111) 555-1234</strong></p> <p>Email <strong>email@yoursite.com</strong></p>

</div>

<footer class="main-footer"> <p class="studentNameFooter">Student Name</p>

<ul class="foot-nav"> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> <p class="smallFooter"> <a href="index.html">Back to top</p>

</footer>

</body> </html>

/Test Css to ensure all link documents are working/

/Fix margin issue on page/ html, body {

margin:0; padding:0;

}

.clearfix { overflow: auto; }

{ box-sizing: border-box; /background-color: white;/ }

body { font-family: 'Open Sans', sans-serif; font-weight: lighter; text-align: center; background-color: #F9F9F9; }

h2 { font-weight: lighter; }

a { color: black; text-decoration: none; }

img { max-width: 100% }

li { list-style-type: none;

}

p { margin: 30px; }

.portfolio { background-color: white; padding: 20px;

}

.name a, .main-nav a { display: block; text-align: center; padding: 10px; } .main-nav { padding-left: 10px; padding-right: 10px; }

.nav, .bio { background-color: #F9F9F9 }

.portfolio-heading { padding-top: 20px; padding-bottom: 20px; text-transform: uppercase; opacity: .6

}

/Font Opacity/

.contact_info { margin: 20px; opacity: 0.5; }

.bio_text { opacity: 0.5; margin: 20px;

}

.contact_info {
    border-bottom: 1px solid black;
    margin-bottom: -25px;

}

/* ================================= Media Queries ==================================== */

@media (min-width: 0px) and (max-width: 768px) { .foot-nav { display: none; visibility: hidden; } .smallFooter { font-weight: bold; float: right;

}

.main-nav li {
border: 1px solid white;
margin: 5px;
background-color: white;

}

@media (min-width: 769px) {

/Navigation Menus and Profile Picture/

.main-nav-nav { font-weight: bold; padding-right: 30px; display: inline-block; text-align: center; }

.main-nav li { float: left; padding: 10px; margin: 10px; }

.bio { width: 100% float: right; }

.bio_text { width: 50%; display: inline-block; }

.main-nav {
    display: inline-block;
    text-align: center;
    margin-bottom: 10px;
    margin-top: -20px;
}

/Cols/ .name, .col { float: left; }

.marketing,
.search_page {
    width: 50%;
    padding: 10px;
    float: left;
}

.travelApp,
.map {
    width: 50%;
    padding: 10px;
    float: left;
}

.photoGallery {
    width: 50%;
    display: block;
    display: inline-block;
    float: left;
    padding-right: 10px;
}

.calculator {
    width: 50%;
    display: inline-block;
    padding-left: 10px;
}

.contact_info { padding-left: 150px; padding-right: 150px; }

/Footer/

.foot-nav { font-weight: bold; float: right; padding-right: 30px; display: inline-block; }

.foot-nav li { float: left; padding: 10px; margin: 10px; }

.studentNameFooter { display: inline-block; float: left; font-weight: bold; }

.smallFooter { display: none; visibility: hidden;

}

@media (min-width: 1025px) {

.marketing,
.search_page,
.travelApp {
    width: 33%;
    padding: 10px;
    float: left;
}

/.largePage2 .clearfix { content: "largePage2"; display: table; clear: both; }/

.map .clearfix { clear: both; width: 33%; }

.photoGallery { clear: left; display:inline-block; width: 33%; }

.calculator { float: left; width: 33%; display: inline-block; }

.contact_info { clear: both;

}

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Nick Honegger

Nick Honegger

Need help fixing floating images.

Julie Myers

Julie Myers

7 Answers

Julie Myers

Julie Myers

Nick Honegger

Nick Honegger

Julie Myers

Julie Myers

Julie Myers

Julie Myers

Julie Myers

Julie Myers

Owa Aquino

Owa Aquino

Julie Myers

Julie Myers

Nick Honegger

Nick Honegger

Julie Myers

Julie Myers

Nick Honegger

Nick Honegger