This community-built FAQ covers the “Percentages: Height & Width” exercise from the lesson “Sizing Elements”.
Paths and Courses
This exercise can be found in the following Codecademy content:
Web Development
Learn Responsive Design
FAQs on the exercise Percentages: Height & Width
There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (
) below.
If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply () below!
Agree with a comment or answer? Like (
) to up-vote the contribution!
Need broader help or resources? Head here.
Looking for motivation to keep learning? Join our wider discussions.
Learn more about how to use this guide.
Found a bug? Report it!
Have a question about your account or billing? Reach out to our customer support team!
None of the above? Find out where to ask other questions here!
Why did the post section of the html overflow its parent(blog)?
2 Likes
It seems that setting height and width in pixels rather than % is going to cause problems on different devices displays etc. Is there ever a time when you should use pixels or is it recommended to always use percentage for width and height?
2 Likes
Same question. If there’s seemingly no padding/margin/border, why would it overflow when you’re setting it to a % of the parent?
2 Likes
Same question I was using box-sizing:border-box and I had 2 divs next to each other
div 1 has width: 100px
div 2 has width: 100%
with both using float left but for some reason div 2 always shows under div 1 instead of next to div 1 and filling it in. What do I do? (div 1 has a border of 1px solid)
Hi @cssplayer91911 
Have you set display: inline-block in CSS?
1 Like
Hi, I have a question, when do we have to use %?
1 Like
What I understood is that the % unit allows us to size elements relative to their parent elements. So if we had a <div> with a width of 100px, and inside of this <div>, we had another <div> with a width of 50%, that child <div> would have a width of 50px (50% of 100px)
<div class="parent">⠀⠀
<div></div>
</div>
.parent {
width: 100px;
}
.parent div {
width: 50%; /* 50px */
}
However, this lesson kind of confuses me with the instructions. I get why we gave
.images .image-container a width of 50% (To make both image containers the same size allowing them to be next to each other). However, there are a few things that I don’t get: why when we set the width of .post .image-container to 100%, it overflowed, why we set the width of #blog .post to 52% and why we set the width of #blog to 86% - we didn’t see any visual difference unless we inspected it using dev tools
2 Likes
task2:
Notice that the blog’s text becomes illegible at smaller widths.
I didn’t find it illegible. How does “illegible” look like if it happens? Thank you
1 Like
Sort of… like all the text is really really thin and stacked up like a lower of words.
I need a help with a syntax.
background-image: url(‘camel-background.png’);
If I am using this code, Do I need to have the image in the root folder? Where I am keeping the HTML and CSS files already.
From where would the image be obtained.
Note: Because the box model includes padding, borders, and margins, setting an element’s width to 100% may cause content to overflow its parent container. While tempting, 100% should only be used when content will not have padding, border, or margin."
if I use box-sizing: border-box, will the content with padding, border and margin still overflow
make sure that there is no padding , border or margin.
I have a question about when I set the .post .image-container to 100%, once I pull the screen into a smaller size, the image will move to the right side instead of keeping center. How to fix it?
1 Like
As I understand it, if you simply declare the path as the name of the file, it is assumed that the file you’re referring to is in the same folder (directory) as your CSS file. Whenever you declare a relative path to a file in CSS or HTML, just remember that it is in relation to the file you’re working in. So if you’re declaring the path in HTML, think of where the file is in the file system in relation to the HTML file. The same goes for the CSS.
I realise this is a few years later than when you asked this question, but hopefully this response will be useful for others too. 
