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

Posted by Youssef Aziz
Youssef Aziz
1,403 Points

CSS Float property

When i use the Flaot:Right for the nav tag nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; } it does not give the desired results as in the video ...why ? what could be wrong

Chyno Deluxe
Chyno Deluxe
16,936 Points

can you post a snapshot of your workspace so that I can take a closer look.

Chyno Deluxe
Chyno Deluxe
16,936 Points

Creating a Snapshot

To get started, create your first snapshot today!

  • Launch any of your workspaces.
  • Select the snapshot menu in the upper right corner.
  • Click "Take Snapshot"
  • Visit the link and share it with someone.

9 Answers

Chyno Deluxe
Chyno Deluxe
16,936 Points

Ok, After viewing your files I noticed a few things that were missing, all of which are in your responsive.css. view below.

@media screen and (min-width:660px){

/**************************************
Header
**************************************/
 nav {
    background: none;
    float: right; /*REMOVED THE COMMENT*/
    font-size: 1.125em;
    margin-right: 5%;
    text-align: right;
     width: 45%;  /*REMOVED THE COMMENT*/
  }
  #logo{
  float:left; /*REMOVED THE COMMENT*/
    margin-left: 5%; /*ONLY HAD PERCENT SIGN - NO NUMBER*/
    text-align:left;
    width:45%;
  }
  h1{
  font-size:2.5em;
    margin-left:20px;
    margin-bottom:10px;
  }
  h2{
  font-size:0.825em;
    margin-bottom:20px;
    margin-left:20px;
  }
  header{
  border-bottom:5px solid #599a68;
    margin-bottom:60px;
/*
WHEN DEALING WITH FLOATED ELEMENTS, 
THEY ARE TAKEN OUT OF THE NORMAL FLOW 
OF THE CONTENT. FLOATS TO NOT HAVE SET HEIGHTS 
SO ANY ELEMENTS THAT CONTAIN FLOATS WILL COLLAPSE 

ADDING OVERFLOW: HIDDEN; WILL FIX THIS ISSUE
*/
    overflow: hidden;  /*ADDED*/
  }  
}

I hope this helps. Let me know if you have any questions or if this does not fix your problem.

Nestor Segura
Nestor Segura
13,025 Points

Chyno can you tell me how you fix the code presentation?

Thanks

Youssef Aziz
Youssef Aziz
1,403 Points

Thanks a lot it fixed the issue , but this was not used by the code before in the tutorial , i will review my code again . i learned something new :) thanks

Chyno Deluxe
Chyno Deluxe
16,936 Points

Nestor Segura ,

Youssef Aziz , It's possible that what I provided was not on the tutorial. But its one of the common ways to fix floating problems. Glad I could help.

Nestor Segura
Nestor Segura
13,025 Points
Nestor Segura
Nestor Segura
13,025 Points

can you tell me what do you want to achieve? It would help the html code too to help you out. and did you write "tag"? is that a class?

I think that code didn't select the correct element. But the CSS properties work for me. I tried it out and it works.

Youssef Aziz
Youssef Aziz
1,403 Points
Youssef Aziz
Youssef Aziz
1,403 Points

@Chyno i am not able to paste the screen shots here , if you can show me how , i tried common copy paste and not working.

@Nestor i am trying to make Nav tag float to the right beside the header , which is not happening it moves down the header , if i commented the float:right it works fine Main.css:

/**************************************
Genral Styling
**************************************/

body{
  font-family: 'Open Sans', sans-serif;
}

#wrapper{
  max-width:940px;
  margin:0 auto;
  padding: 0 5%;
}
a{text-decoration:none;
color:#6ab47b}

img{
max-width:100%;


}
h3{
margin:0 0 1em 0;
}
/**************************************
Portofolio gallary  
**************************************/
#gallary{
 /* max-width:45%;*/
  margin:0;
  padding:0;
  list-style:none;
}
#gallary li {
  float: left;
  width:45%;
  margin:2.5%;
  background-color:#f5f5f5;
  color:#bdc3c7;
}
#gallary li a p{
  margin:0;
  padding:5%;
  font-size:0.75em;
  color:#bdc3c7;
}

/**************************************
Heading
**************************************/

header{
  margin:0 0 30px 0;
  padding:5px 0 0 0;
  width:100%;
}
#logo {
text-align:center;
margin:0;
}
h1{font-family:'chango' ,sans-serif;
    margin: 15px 0;
  font-size:1.75em;
  font-weight:normal;
  line-height:0.8em;
}
h2{
  font-weight:normal;
  font-size:0.75em;
  margin:-5px 0 0;
}
/**************************************
navigation
**************************************/

nav{
text-align:center;
  margin:20px 0 0;
  padding:10px 0;
}

nav ul {list-style:none;margin:0 10px;padding:0;}
nav li{display:inline-block}
nav a {padding:15px 10px;font-weight:800}

h1,h2{color:#fff}

nav a {color:#fff}
nav a:hover{color:#00FF33}
nav a.selected{color:#00FF33}

/**************************************
Colors
**************************************/
body{background:#fff}

header{
 background: #6ab47b;
  border-color: #599a68;
       }
nav { background:#599a68;}
/**************************************
Profile
**************************************/
.profile-photo{
max-width:150px;margin:0 auto 30px;padding:0;display:block;border-radius:35px;
}
/**************************************
contact
**************************************/
.contact-info{
margin:0;
  padding:0;
  font-size:0.9em;
  list-style:none;
}
.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}
.contact-info li.phone a {
background-image: url('../img/phone.png');
/*  background-repeat:no-repeat;*/
}
.contact-info li.mail a{
background-image: url('../img/mail.png');
}
.contact-info li.facebook a{
background-image: url('../img/facebook.png');

}
/**************************************
footer
**************************************/
footer{
  font-size:0.75em;
  padding-top:10px;
  text-align:center;
  clear:both;
  color:#ccc;
  float:none;
}
.socail-media{width:20px;height:20px;margin:0 5px}

responsive.css
@media screen and (min-width:480px){

/**************************************
Two Column Layout  
**************************************/
  #primary{
  width:50%;
    float:left;
  }
#secondary{
  width:40%;
    float:right;
  }  
  /**************************************
each element has 2.5% margin left and right of total 5%
  we need three columns : 3*5=15
  take out the margin : 100%-15%=85%
  then we need to have each elemnt of width 85/3=28.3333333%
**************************************/

  /**************************************
Portofolio page 
**************************************/
  #gallary li{
  width:28.333333%
  }
 #gallary li:nth-child(4n){
    clear:left}
   /**************************************
About page 
**************************************/
  .profile-photo{
  float:left;
    margin:0 5% 80px 0;
  }

}
@media screen and (min-width:660px){

/**************************************
Header
**************************************/
 nav {
    background: none;
    float: right;
/*
    font-size: 1.125em;
    margin-right: 5%;
    text-align: right;
     width: 45%;
*/
  }


  }


}
Chyno Deluxe
Chyno Deluxe
16,936 Points

Fixed: Code Presentation

Nestor Segura
Nestor Segura
13,025 Points
Nestor Segura
Nestor Segura
13,025 Points

can you please paste the html code too? then I can try it out by my self and try to fix it.

Nestor Segura
Nestor Segura
13,025 Points
Nestor Segura
Nestor Segura
13,025 Points

can you please paste the html code too? then I can try it out by my self and try to fix it.

Youssef Aziz
Youssef Aziz
1,403 Points
Youssef Aziz
Youssef Aziz
1,403 Points

index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello There || Watch out</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link href='http://fonts.googleapis.com/css?family=Chango|Open+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/responsive.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Youssef Aziz</h1>
        <h2>Newby Deisgner</h2>
       </a>
      <nav>
        <ul>

          <li><a href="index.html" class="selected">Portofolio</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="gallary">
          <li>
            <a href="img/numbers-01.jpg">
            <img src="img/numbers-01.jpg" alt="">
            <p>Image number 01</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
            <img src="img/numbers-02.jpg" alt="">
            <p>Image number 02 number 264 and long caption is needed now for test</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
            <img src="img/numbers-06.jpg" alt="">
            <p>Image number 06</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
            <img src="img/numbers-09.jpg" alt="">
            <p>Image number 01</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
            <img src="img/numbers-12.jpg" alt="">
            <p>Image number 01</p>
            </a>  
          </li> 
        </ul>
      </section>
      <footer>
        <a href="https://facebook.com/theZahir"><img src="img/facebook-wrap.png" alt="Facebook logo" class="socail-media"></a>
        <a href="https://facebook.com/theZahir"><img src="img/twitter-wrap.png" alt="Twitter logo"class="socail-media"></a>
        <p> &copy; 2015 YA</p>
      </footer>
    </div>
  </body>


</html>
Youssef Aziz
Youssef Aziz
1,403 Points
Youssef Aziz
Youssef Aziz
1,403 Points

workplace snapshot https://w.trhou.se/fmhxx8mt3d

Nestor Segura
Nestor Segura
13,025 Points
Nestor Segura
Nestor Segura
13,025 Points

this are my recomentations for you:

I reorganize your code into this 

<header>
   <nav class="clearfix">
        <a href="index.html" id="logo" class="clearfix">
            <h1>Youssef Aziz</h1>
            <h2>Newby Deisgner</h2>
        </a>
        <ul>
          <li><a href="index.html" class="selected">Portofolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>

  </nav>
</header>

And I would recomend you to erase all css properties aplied to the header and beggin with something like this: 

*{
    padding:0;
    margin:0;
    text-decoration:none;
}

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

header {
    background-color:green;

}

#logo h1, 
#logo h2{
    color:#fff;
    padding:5px;
}

header nav ul li{
    display: inline-block;
    padding: 0 10px;
}

header nav ul {
    float:right;
    padding:10px;
}

header nav ul li a{
    color:white;
}
Chyno Deluxe
Chyno Deluxe
16,936 Points

Fixed: Code Presentation

Youssef Aziz
Youssef Aziz
1,403 Points

i do not fully understand your reply , clearfix is new class but what is :before and:after ?

Nestor Segura
Nestor Segura
13,025 Points

.clearfix is a class that you can add to floating elemtns on your design.

:after and :before are 2 pseudo element to introduce some content after or before of an element. using this technic

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

you are introducing some virtual element to fix the problem caused from floated elements ( elements taked out of the normal content flow, how @chyno explained )

I implmenet the .clearfix::before that help me in some cases to avoid this uses too.

Youssef Aziz
Youssef Aziz
1,403 Points
Youssef Aziz
Youssef Aziz
1,403 Points

@Nestor Segura thanks a lot for your help , i also learned this technique i need to read more about the pseudo classes thanks a lot guys for your help