If a div
is 100% width, should I still put in width: 100%;
? I look at a lot of code and it's always in there even though by default a div
is 100%.
If you set the width to 100% on the body element you will have a full page width. This is essentially equivalent to not setting a width value and allowing the default. If you want to use the body element as a smaller container and let the HTML element fill the page, you could set a max-width value on the body.
It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it's simple — just add width: 100% in your CSS declaration for that element, and your problem is solved.
All block level elements inherit the width of their parent element by default. In your example, the div is inheriting the width of the parent body tag, taking into account any margin or padding on the body element. this doesn't mention height. Which is max(0,content).
Properties of block elements Occupy Full width ( 100% ) of the parent element.
No, doing so can actually cause problems. 100%
is not the same as auto
. width
refers to the width of the content, excluding borders, padding and margins. auto
automatically computes the width such that the total width of the div fits the parent, but setting 100%
will force the content alone to 100%, meaning the padding etc. will stick out of the div, making it larger than the parent.
See this for an example
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With