Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Nick Honegger
seal-mask
.a{fill-rule:evenodd;}techdegree
Nick Honegger
Front End Web Development Techdegree Student 8,773 Points

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

Julie Myers
Julie Myers
7,627 Points

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

7 Answers

Julie Myers
Julie Myers
7,627 Points

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.

Nick Honegger
seal-mask
.a{fill-rule:evenodd;}techdegree
Nick Honegger
Front End Web Development Techdegree Student 8,773 Points

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!!!

Julie Myers
Julie Myers
7,627 Points

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.

Julie Myers
Julie Myers
7,627 Points

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

Julie Myers
Julie Myers
7,627 Points

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

Owa Aquino
Owa Aquino
19,277 Points

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

Cheers!

Julie Myers
Julie Myers
7,627 Points

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; }

Nick Honegger
seal-mask
.a{fill-rule:evenodd;}techdegree
Nick Honegger
Front End Web Development Techdegree Student 8,773 Points

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?

Julie Myers
Julie Myers
7,627 Points

could you copy and paste all of your coding?

Nick Honegger
seal-mask
.a{fill-rule:evenodd;}techdegree
Nick Honegger
Front End Web Development Techdegree Student 8,773 Points

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;

}

}