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
arifbinyusuf
901 PointsWhat is the default value of a specific dimension(width,height etc) of a container
Hi guys I was just wondering. What will be the default value of a dimension(in terms of width, height, size etc) of a container(say ul element or footer element) If the container is not given any specific value for any of these (width, height, size etc) in it css styling. And also what size will be assumed by say, an image whose width is 100% and nested inside such a dimensionless container. I am asking because if an image of 100% width is nested inside a container with a specified width, the image can only occupy 100% of that specified width of it container. What if the container has no defined value for any dimension?
3 Answers
Bill Hinostroza
19,273 PointsI am not 100% sure if this is going to answer your question but every browser has their own default css and they each differ.
Which is why you need to download a reset stylesheet (normalize.css) so your page can look consistent throughout every browser.
Mike Costa
Courses Plus Student 26,362 PointsI just tested this to see what would happen and if you have a div with no dimensions set, and an image with no dimensions, the image will be at its natural size, same as if you set the div to 100% width and 100% height. But if you set an image with a width and height of 100%, and none of its parent containers have a set width and height, it will expand the whole width and height of the window it is container in (because the window would be the parent container with an actual set width and height).
arifbinyusuf
901 PointsThx mike. You confirmed my thought. Given u a best answer for that.
Michael Peterman
19,087 PointsWorking in CSS you have two options when setting the size of an element; either setting an exact pixel width and / or height, or by using a relative unit of measurement. Setting an element's width and height using pixels (example: width: 100px;) means your element is always going to have the exact same dimensions, no matter what.
Though, your question is more focused on the second approach to sizing elements: utilizing relative units of measurement. An important idea to remember while working with anything other than pixels is relative units are relative to other elements. This means that, as you noted in your question, giving a child element a relative unit of measurement, and nothing to relate that measurement to, probably isn't going to have the effect that you're hoping for.
In most cases, setting a relative size to an element with nothing to compare that size to (in your example setting a 100% width relative to...nothing) is just going to get that rule ignored by the browser. It's kind of like asking "what's 50% of 0?" You can't really have half of zero, because there's nothing to cut in half. In this case, you can't have 100% of nothing, it still equals nothing.
I guess a more direct answer is would be: if you wrap an image inside of a div without setting the div's width, and set your image to a width of 100%, the image is just going to be displayed at it's initial dimensions. As for a footer element or ul, the elements you create inside of those tags will automatically cause the parent div to expand or contract depending on the size of the font uses, padding, and margins, etc.
Hope this helps!
arifbinyusuf
901 PointsThx man.