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 troy beckett
troy beckett
12,035 Points

layout problems

Basically i've ran into a problem when trying to create something and I can't work it out. i have made a much simpler version on codepen hoping someone else might have an idea.

Basically I have a div with a class wrap. Inside the wrap I have two other divs. Below the wrap I have a footer. What I want to do is positioning the two divs inside wrap on top of each other and then when I click a button one is revealed while the other is hidden behind.

The content I have in the two divs is float and to get them to lay on top of each other I've positioned them absolute.

Now my actual problem is how do I stop the footer below from coming up. I want the footer to remain below the wrap div. I put a slight opacity on the divs so you can see the footer. I understand the problem but I don't know how to solve it.

heres my code pen:

http://codepen.io/tbeckett24/pen/xGVrYZ

heres my code

<body>
  <section>
  <div class="button"><h1>red</h1></div>
  <div class="wrap">
    <div class="first group"><h2>hello</h2></div>
    <div class="second group"><h2> no hello</h2></div>
  </div>
  <footer><h2>footer</h2><footer>
  <section>
</body>

* {
  margin:0;
  padding:0;
}

section{
  width:100%;
  margin-top: 50px;

}

.button {
  width:100%;
  background:pink;
  text-align:center;
  padding: 50px 0;
}

.wrap {
  width: 100%;
  background: yellow;
  position: relative;
}

.first {
 background: red;  
 padding: 50px 0px;
 width:100%;
}

.second {
  background: green; 
  padding: 50px 0px;
  width:100%;
}

.first h2, second h2 {
 float:left; 
}

.first, .second {
 position: absolute;
 top:0;
}

footer {
  background: brown;
   text-align:center;
}

/* clear fix for floats*/
.group::after {
  content: "";
  display:table;
  clear:both;
}

1 Answer

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

You can either set a min-height of 125px to the .wrap div or set margin-top on the footer (also 125px).

Since absolutely positioned items do not retain their height, you'll either need to set a fixed height on the parent div, margin-top on the footer, or use js to calculate the height of the first/second div and then dynamically set a height on the .wrap div whenever the button is toggled.