Html width 100%

html css webforms standards

88,392

Solution 1

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%;
}

Solution 2

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.

Solution 3

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

Solution 4

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.

View more solutions

88,392

Author by

vtortola

Updated on October 07, 2020

Comments

vtortola over 3 years

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?