If you want a block-level element to fill the space inside of its parent element, simply add width: 100% in your CSS sheet for that specific element, and your problem is solved. Right?

But hold your horses! I’m sure designers of all skill levels did something similar to what I’ve just described, and came up with results ultimately leading to confusion, wondering and head scratching and then ending up with absolute widths until we find just the right fit. It’s just one of those concept in CSS that should be easy to understand, but it’s sometimes not (It does take a lot of practice to master though) — It’s because how percentages behaves in CSS.

Did you Know That: “Blocks Elements Doesn’t Need 100% Width”

Between block-level elements and inline elements, we know that block elements (such as a <div>, <p>, or <u>, etc..) is, by default expands to fit the area of its containing, or parent, element minus any margins or padding the parent has.

I know this CSS concept is pretty well known among for most of the experienced designers, but for the sake of the new ones who are learning, I thought it would be useful to point it out here as an introduction to explaining how percentages work when used on the width property.

What I’m really Trying to Say

When you give a block element a width of 100% in CSS, we’re basically making the element’s width exactly equal to the declared width of its parent — but only if its parent has an explicit width. So for example, if you have a parent element that’s 600px wide, a child block element given a width of 100% will also be 600px wide, and will still be subject to margins, paddings, and borders. See the illustration below:

• The width of the child element is equals the parent’s explicit width setting
• The width of the child is independent of its own padding and margins so it overlaps the border of the parent element.

The exact same rule also applies to any percentage value. The content area will be the percentage of the parent’s set width.

Another thing to take note is that, the width of the child’s content area will be equal the width of the parent’s width, and will not overlap outside the containing parent unless its own padding or margins are affecting it.

So When to Use 100%?

In most of cases, applying width: 100% to a block level element is definitely unnecessary and will surely bring undesirable results if you did. The only time I think you need to give an element a width of 100% is when the element is inheriting an absolute width value that you want to override. But in this case, the right alternative would be to use “width: auto”, which is the default for block elements.

1. 

   Skitienty

   What words..
2. 

   admin

   @Skitienty: What do you mean by what words?

Leave a Reply