Hi,
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?
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%;
}
If I understand you correctly, you're asking whether width: 100% is IE-only. The answer is no; it's understood by all mainstream browsers. Source: http://www.w3schools.com/css/pr_dim_width.asp
Note that width:100% will not work on inline tags... So things like or where the property 'display' as value 'inline' are not effected.
If thats news to you I recommend grabbing a book as HTML is not something to learn adhoc.
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.