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
troy beckett
12,035 Pointspositioning divs
i want to stack two divs on each other so that i can toggle between showing and not showing a one div at a time. Problem is when use absolute positioning to stack I get really annoying styling problems.
Where absolute position elements no longer have height things like my footer ride up. I don't want this. What are other ways I could achieve the same layout without absolute positioning.
do you have to give px heights???
troy beckett
12,035 Pointscould you explain that a little bit further does the method your saying let you stack to divs exactly on top of each other. See the problem i've been having is that I'm absolute positioning two divs on top of each other. Then because they get moved form normal page flow all content beneath slides up.
Niclas Valentiner
8,947 PointsJust use regular relative positioning.
Here's a link to help out: http://www.w3schools.com/css/css_display_visibility.asp
I just noticed on the above link that using visibility doesn't stop the element from taking up space, so use display: hidden to hide the div you want hidden.
troy beckett
12,035 Pointsthing is using visiblity like your saying won't work because it takes up space in the document which doesn't look nice on the page.
Niclas Valentiner
8,947 PointsCheck the comment I wrote 5 minutes ago: I corrected myself and provided a link that explains it all in more detail. Sorry if I'm a bit vague and such, it's 12:50 am here currently.
1 Answer
Marcus Parsons
15,719 PointsHey Troy,
I made a little CodePen that I think does what you're asking for your document to do. You don't want the footer to reposition each time you hide/display a box. The easiest solution to this that I came up with was just putting each box into a containing element with a specified height. Since the containing element is the one that the structure is depending on, the structure will not change when each box is hidden or displayed.
Niclas Valentiner
8,947 PointsNiclas Valentiner
8,947 PointsTake a look at the HTML5 property "visibility". Alternative you can use the CSS property "display".
Both are used to hide elements and since hidden elements don't take up any visible space you merely switch the visibility/display of the 2 divs.
OBS: Make sure the divs are next to one another on the page.
I recommend using the visibility property.