Geek Answers Handbook

Html width 100%

It drives me crazy. What happens with "width: 100%"? Apparently this just works in IExplore, so I think this is one of those things that Microsoft has done.

But then ... how do you point to an element that should accept all available parent spaces in such a way that all browsers can understand?

Greeting?

+6
html standards css webforms
source share
5 answers

The block-level element (display: block;) will automatically occupy 100% of the width of the parent element. You can change its width using percent or pixels. Inline elements (display: inline;) cannot change the width.

If you want something to occupy the entire space of the parent elements, I suggest you try something like this:

.class{ display:block; width:100%; }
+11
source share

Width: 100%, of course, is not an MS production. Understanding elements like box model and inline vs block (e.g. spans vs divs) will help you understand some of what you see. Differences in the browser are less related to "Width: 100%" than to how browsers interpret the window model for this element and, in particular, such as fields, borders and padding.AFAIK, all browsers will adhere to the width: 100% but how they interpret everything else can affect how much space they transmit as “100%”.

Remember that 100% is 100% of PARENT, not WINDOW.

  <body> <div id = "one" style="width:50%"> <div id = "two" style = "width:100%" /> </div> </body>

In this case, “two” will still be only 50% of the window width, because it is with the parent, whose width is 50%. (1 * .5 = .5)

So, saying that a specific example of incomprehensible behavior will greatly help people give you a specific answer.

+4
source share

If I understand you correctly, you ask if width: 100% only for IE. The answer is no; It is understood by all major browsers. Source: http://www.w3schools.com/css/pr_dim_width.asp

+2
source share

Please note that width: 100% will not work with inline tags ... So, things like or where the property “show” as the value “inline” are not executed.

If this is news for you, I recommend grabbing the book as HTML is not something that adhoc needs to learn.

+1
source share
 html { width:100%; } body { background-color:#f2f2f2; margin:0; padding:0; } a { color:#ec3f3f; text-decoration:none; font-weight:400; font-style:normal; } a:hover { color:#262626; text-decoration:none; font-weight:400; font-style:normal; } p,div { margin:0!important; } table { border-collapse:collapse; } ::-moz-selection,::selection { background:#ec3f3f; color:#fff; } .ReadMsgBody,.ExternalClass { width:100%; background-color:#f2f2f2; } @media only screen and max-width640px{ img[class=img_scale] { width:100%!important; height:auto!important; } img[class=divider] { width:440px!important; height:2px!important; } table[class=spacer] { display:none!important; } td[class=center] { text-align:center!important; } table[class=full] { width:400px!important; margin-left:20px!important; margin-right:20px!important; } table table,td[class=full_width] { width:100%!important; } div[class=div_scale],table[class=table_scale],td[class=td_scale] { width:440px!important; margin:0 auto!important; } } @media only screen and max-width479px{ img[class=img_scale] { width:100%!important; height:auto!important; } img[class=divider] { width:280px!important; height:2px!important; } table[class=spacer] { display:none!important; } td[class=center] { text-align:center!important; } table[class=full] { width:240px!important; margin-left:20px!important; margin-right:20px!important; } table table,td[class=full_width] { width:100%!important; } div[class=div_scale],table[class=table_scale],td[class=td_scale] { width:280px!important; margin:0 auto!important; } }
-2
source share

More articles:


All Articles