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 Rafal Dziobek
Rafal Dziobek
3,771 Points

CSS float problem

Hello, boyz and girlz. I was creating the 1st website I was doing quite good I thought ...

I can't add a top margin to a <section class="photo" > I have used Float Clearfix

<!DOCTYPE html>
<html>
  <head>
    <title>Global Resorts Network</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <header>
      <a href="#"><img class="logo" src="imgs/logo.png" alt="logo"></a>
      <h1 class="main-header">Global Resorts Network</h1>
    </header>

  <main>

    <section class="about">
      <h2>Astronomy Or Astrology</h2>
      <p>Developed by the Intel Corporation, HDCP stands for high-bandwidth digital content protection. As the descriptive name implies, HDCP is all about protecting the integrity of various audio and video content as it travels over a multiplicity of different types of interfaces. Such data interfaces as GVIF, DVI, and HDMI will all support the functionality of HDCP. </p>
        <a class="cta" href="#">BOOK</a>
    </section>

    <section class="services" class="group">
      <div class="one">
        <img src="imgs/ikona1.png" alt="ikona">
        <h3>Right Hotel</h3>
        <p>Kinfolk try-hard paleo kombucha selvage, vape raclette literally lumbersexual celiac kogi</p>
      </div>
      <div class="two">
        <img src="imgs/ikona2.png" alt="ikona">
        <h3>Watsicachester</h3>
        <p>Kinfolk try-hard paleo kombucha selvage, vape raclette literally lumbersexual celiac kogi</p>
      </div>
      <div class="three">
        <img src="imgs/ikona3.png" alt="ikona">
        <h3>Do Last Forever</h3>
        <p>Kinfolk try-hard paleo kombucha selvage, vape raclette literally lumbersexual celiac kogi</p>
      </div>
    </section>

    <section class="photo">
      <div class="group">
        <img src="imgs/dear.png" alt="deer">
        <p class="pdeer">Dreamcatcher disrupt leggings, +1 hexagon green juice four dollar toast freegan letterpress woke cloud bread. Poke brunch synth venmo asymmetrical jianbing pitchfork gluten-free. Vice subway tile freegan sartorial offal banjo. Vexillologist fixie farm-to-table freegan cardigan.</p>
      </div>
      <div class="group">
        <p class="pmountain">Dreamcatcher disrupt leggings, +1 hexagon green juice four dollar toast freegan letterpress woke cloud bread. Poke brunch synth venmo asymmetrical jianbing pitchfork gluten-free. Vice subway tile freegan sartorial offal banjo. Vexillologist fixie farm-to-table freegan cardigan.</p>
        <img src="imgs/mountain.png" alt="mountain">
      </div>
    </section>
    <footer></footer>
  </main>
  </body>

</html>

* {
  margin: 0;
  padding: 0;
  font-size: 1em;

}

header {
  width: 100%;
  height: 650px;
  background: linear-gradient(transparent,white 95%),
              url(imgs/bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

h1 {
  color: #F5A623;
  font-size: 4em;
  text-align: center;
  text-shadow: 2px 2px 10px grey;

}

h2{
font-size: 3em;
padding: 10% 15% 5%;
}

footer {
  height: 90px;
  width: 100%;
  background: grey;
}
/* classes */
.main-header{
    margin-top: 150px;
}

.logo{
margin: 8% 0 0 11%;
}



.about p {
padding: 0 15% 0;
line-height: 1.4;
letter-spacing: 0.075rem;
}

.cta {
font-size: 2em;
display: inline-block;
padding: 7px 40px;
border: solid #F5A623 4px;
margin: 30px 0;
}
.cta:hover {
color: tomato;
border: solid tomato 4px;
}
/* Links */
a:visited {
  color: #F5A623;
  text-decoration: none;
}

a:link {
  color: #F5A623;
  text-decoration: none;
}

.about,
.services,
.photo {
  margin: 0 17%;
  text-align: center;;
}
/* services */
.about {
  margin-bottom: 150px;
}
.services {
  margin-bottom: 150px;
}
.one,
.two,
.three {
  width: 33%;
  float: right;
}

.one h3,
.two h3,
.three h3{
  font-size: 1.5em;
  padding-top: 50px;
}
.one p,
.two p,
.three p{
  font-size: 1.1em;
  padding: 20px;
  line-height: 1.4;
}
/* Obrazki */
.photo {
  margin-top: 200px;
}
.photo img {
  width:40%
}
.photo p {
  width: 50%;
  padding: 30px;
}
.pdeer {
float: right;
}
.pmountain {
  float: left;
}



/* Float Clearfix ------------------ */

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

10 Answers

deebird
deebird
7,558 Points

just clear the footer

footer {
    height: 90px;
    width: 100%;
    background: grey;
    clear: both;
}
deebird
deebird
7,558 Points
deebird
deebird
7,558 Points 
.about,
.services,
.photo {
  margin: 50px 17% 150px;
  text-align: center;
  float: left;
}
deebird
deebird
7,558 Points
deebird
deebird
7,558 Points

when you float elements it removes them from the normal flow you floated your .one, .two, .three classes but not their containeR, so the container they were in no longer had any dimensions, by floating the container it added dimension back so you could apply margins..

Karen Fletcher
Karen Fletcher
19,189 Points
Karen Fletcher
Karen Fletcher
19,189 Points

You're defining a margin top for the photo class twice, once at the very top of your CSS, and once below the Obrazki comment. CSS will apply the margin of this last described element. I'm not sure 100% what issue you're seeing, I hope this helps!

Rafal Dziobek
Rafal Dziobek
3,771 Points
Rafal Dziobek
Rafal Dziobek
3,771 Points

Hello Karen, thx for your time. So you are saying my top margin of <section class="photo"> should be 200 px because. but it is not. Once I've commented floats, margins and padding work fine. So it must be a float problem but i have used

Karen Fletcher
Karen Fletcher
19,189 Points
Karen Fletcher
Karen Fletcher
19,189 Points

Can you post your full HTML and full CSS? It would help me with debugging.

Rafal Dziobek
Rafal Dziobek
3,771 Points
Rafal Dziobek
Rafal Dziobek
3,771 Points

I've updated the code

Rafal Dziobek
Rafal Dziobek
3,771 Points
Rafal Dziobek
Rafal Dziobek
3,771 Points

deebird it kinda worked but now I have footer floating in the middle I added a class group to a <main> but it doesn't fix it

deebird
deebird
7,558 Points

I was debugging without the full markup, I'll take a look with it all

Rafal Dziobek
Rafal Dziobek
3,771 Points
Rafal Dziobek
Rafal Dziobek
3,771 Points

It worked ;) thx so much. now I need to figure out why do I have applied float on .about, .services,.photo.

thx so much anyway this simple website took me like 4h :D

Rafal Dziobek
Rafal Dziobek
3,771 Points
Rafal Dziobek
Rafal Dziobek
3,771 Points

ok I understand but in the course, they were using this:

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

so when you assigned .group to the parent container of the floated element it kinda new it's there. kinda I think? I guess I'm wrong . Thx for help.

deebird
deebird
7,558 Points

Yes, that is a standard clearfix, it looks like you added class twice in your html which is why it wasn't working. Floating the parent then clearing floats is a different way to achieve what you wanted but I would suggesting sticking with the clearfix method, just make sure you only define your class once.

<section class="services" class="group">

should be

<section class="services group">
Rafal Dziobek
Rafal Dziobek
3,771 Points
Rafal Dziobek
Rafal Dziobek
3,771 Points

yes i found that myself I'm so proud :D Everything works fine now. Thank you so much for the patience ;)