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
Ronny Rosabal
4,812 PointsCentering elements in the page or parent element.
I'm having difficulty understanding why I cant center some elements inside their parent element. So far I have noticed that inline elements cannot be centered using the margin: 0 auto; and block elements cant be centered unless given a width. The latter brings me to another issue. How do I give a width that is snug to the content but will stretch if the content grows like in a <h2> for example? Also, in noticed that in one occasion I had a footer set to 900px wide and inside a details tag set to a width of 200px and centered but then I gave the footer a position:fixed; bottom: 0; and the details tag went to the left of the footer and I cant figure out why. I know that fixed position like absolute takes the element out of the flow of the document and maybe this has something to do with it. The last thing I'm having a bit of trouble understanding is the height:100%;. With a width: 100%; the element extends the width of the parent element but it doesn't seem to work the same with height. It seems that even when setting the height:100%; the height collapses if there is no content inside or stays snug to the content. Why does it do this and how to I make it stay the 100% height without specifying a fixed height?
Thank you before hand for answering these questions for me.
4 Answers
akc
11,729 PointsI have noticed that inline elements cannot be centered using the margin: 0 auto; and block elements cant be centered unless given a width. The latter brings me to another issue. How do I give a width that is snug to the content but will stretch if the content grows like in a for example?
Other than Inline and block for setting the display property of an element, there is also inline-block, where the element will have the characteristic of a block but it does not take up the whole line width.
More details
Also, in noticed that in one occasion I had a footer set to 900px wide and inside a details tag set to a width of 200px and centered but then I gave the footer a position:fixed; bottom: 0; and the details tag went to the left of the footer and I cant figure out why. I know that fixed position like absolute takes the element out of the flow of the document and maybe this has something to do with it.
Did you center the detail tag? Elements inside your footer div should be set back to default left unless specify otherwise. Try setting your detail tag to margin: 0 auto to center it.
The last thing I'm having a bit of trouble understanding is the height:100%;. With a width: 100%; the element extends the width of the parent element but it doesn't seem to work the same with height. It seems that even when setting the height:100%; the height collapses if there is no content inside or stays snug to the content. Why does it do this and how to I make it stay the 100% height without specifying a fixed height?
In order to use the percentage as height for a child element you need to set the specific height to the parent as well, that includes the html and body element. More details
Yulia Markina
12,616 PointsHi Ronny, I often use a complete guide for centering in CSS from CSS-Tricks [http://css-tricks.com/centering-css-complete-guide/]. It also helped me to understand better how it works.
Hope this will help.
Ronny Rosabal
4,812 PointsThank you Yulia. That is a great article. I can see myself using this guide quite often. It is greatly appreciated.
Unsubscribed User
5,512 PointsI can't answer everything, but I will try to shed some light on a few things.
For the footer problem, try using something like
footer {left: 0; right: 0; bottom: 0;}
or
footer {left: 0; bottom: 0; width: 100%;}
Now, 100% height can be a tricky one and done a few ways, but I like to use absolute positioning. For example, to achieve a 100% height and width for a div element, you could use:
div {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
or
div {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
Hope this helps a little.
Ronny Rosabal
4,812 PointsStuart thank you. I tried changing the positioning to absolute but the width still collapsed to the size of the details or 200px. I went with the fixed positioning to keep the footer at the bottom regardless of size of the screen. What does absolute positioning with bottom: 0; do?
Unsubscribed User
5,512 PointsGreat resource! Thanks, Yulia.
Ronny Rosabal
4,812 PointsRonny Rosabal
4,812 PointsAlfred thank you very much for your response. The articles you included were very helpful.
This is the CSS for the footer and details I have:
I was just looking at it using the Firefox web development tool and it seems like the footer width collapses when using the max-width property. I didn't realize that the details was centering but somehow when I set the position of the footer to fixed (this was done after I had set the max-width property) the width of the footer collapses to the width of the details in this case 200px so that was why it appeared that the details was not centering. If I change the footer to just width: 900px; then it works as expected. Any idea why?
akc
11,729 Pointsakc
11,729 PointsYou're welcome Ronny glad to help.
Max-width property is used to set the maximum width of the element. In other words, it will stretch out as wide it needs to be for its content but never exceed the boundary you set for this property. When there is no content inside the element, it will collapse to 0px.
In your example, since there is an element of 200px wide (detail) inside your footer, the footer element now only stretch as far out to 200px only and stop there. But if your detail element is 1000px wide, the footer will stretch but stop at 900px because that's the maximum width (max-width) you set for the footer.
In conclusion, if you want an element to have a set size (or relative to the parent element), use width property and not max-width property.
Ronny Rosabal
4,812 PointsRonny Rosabal
4,812 PointsYes that makes perfect sense but in that case I don't understand is why it is the full 900px if I get rid of the position:fixed.
akc
11,729 Pointsakc
11,729 PointsPositioning property like fixed and absolute will take the element out of the flow of the document, so if you use the max-width property it will try to collapse itself unless there is some content, which it will stretch to the child element's size.
On the other hand if you use positioning property such as static (default) and relative, it will be in flow with the document and use its parent's width to base the relative size on. In your case, max-width: 900px will stay 900px.