Menu
This is driving me nuts. What happens with "width:100%" ? Apparently it just works in IExplore, so I think it's one of those things Microsoft made up.
But then... how do you tell to a element that has to take all available parent's space in a way that all browsers can understand?
Cheers?
794
Should it Ever Be Used? In many cases, applying width: 100% to a block level element is either unnecessary or will bring undesirable results. If you're using padding on the inner element and you use box-sizing: border-box , then you'll be safe.
Answer is No. cause 100 is pixels and 100% is percentage of overall size of page.
The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
min-width:100% makes sure the element is at least as wide as its container. width: auto allows the element to keep its original size.
A block level element (display:block;) will automatically take up 100% of the width of the parent element. You can resize its width using percentages or pixels. Inline elements (display:inline;) cannot have their width modified.
If you want something to take up all the parent elements space I suggest you try something like this:
.class{
display:block;
width:100%;
}
Width:100% is certainly not a MS fabrication. Understanding things like box model and inline vs block (e.g spans vs divs) elements will help you to understand some of what you will see. The browser differences have less to do with "Width:100%" than with how browsers interpret the box model for a given element, and in particular things like margins, borders, and padding.AFAIK, all browsers will honor width:100%, but how they interpret everything else may impact how much space they give over as "100%".
Remember that 100% is 100% of the PARENT, not the WINDOW.
<body>
<div id = "one" style="width:50%">
<div id = "two" style = "width:100%" />
</div>
</body>
In this case, "two" will still only be 50% of the window wide because it is in a parent that is 50% wide. (1 * .5 = .5)
So, saying that, a specific example of baffling behavior would greatly help people give you a specific answer.
41
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
