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

General Discussion

Posted by Zen Hess
Zen Hess
6,700 Points

Jumping Divs: Independent Project

Hey Friends,

Trying to create a fun layout with grids. The main button, that says "Hello." and then "Explore" starts significantly lower than it is supposed to and then jumps up and down.

When I used absolute positioning to build this same thing, it was solid and stayed in its location (I guess that is the definition of absolute, eh?). Any thoughts on why it would be jumping now?

Here is the CodePen. The real styling is at the very bottom of the CSS (the top is the grid and such).

Thanks in advance! Zen

2 Answers

Gary Mann
Gary Mann
8,639 Points
Gary Mann
Gary Mann
8,639 Points

Hi Zen,

Some block elements must be pushing others. You can start by making the p.buttonText display: inline-block; and you'll feel better.

One thing you can start with: the percentages for width for each grid are percentages of the div.container. So in your html markup, wrap everything in a div class="container" and then remove "class='container' " from the other places you've used it.

Zen Hess
Zen Hess
6,700 Points
Zen Hess
Zen Hess
6,700 Points

Gary,

Thanks for your response. I worked some of the fixes in that you recommended, very helpful! The real fix came from the buttons being set to "display: none" ... When they appeared, they took space from the layout that had previously not been taken, causing the "Hello" button to jump. I switched them to "visibility: hidden," allowing them to retain the space they take up, and giving a much more please response!

Thanks for taking a look at that.