html - Difference between width:auto and width:100% - what is it 100% of? (CSS) -
why setting element position:fixed alter width? know html elements default span entire width of browser window, when set position on header fixed, <div> shrinks 0 width. why this?
trying width:auto not prepare it, <div> still has 0 width!
this illustration taken code academy "build resume" project @ end of web fundamentals course.
i have html file so:
<!doctype html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title></title> </head> <body> <div id="header"></div> <div class="left"></div> <div class="right"></div> <div id="footer"></div> </body> </html> and css file so:
div { border: 5px solid red; border-radius: 5px; } #header{ height:30px; background-color:orange; z-index:1; } #footer{ height:30px; background-color:teal; clear:both; } .left{ height:300px; width:200px; float:left; } .right{ height:300px; width:200px; float:right; } update: noticed setting width:100% maintain width way across browser window. going on here? i've read why fixed positioning alter width of element? not sure how applies here.
edit: thought move comments , seek answering here, give more direction on i'm confused: "yes, seems "whereas position , dimensions of element position:absolute relative containing block, position , dimensions of element position:fixed relative initial containing block" key part. see position:fixed set dimensions of relative viewport, isn't viewport whole browser window? why size collapse zero? , beyond that, why width:auto not prepare width:100% create span whole horizontal length again?"
width:auto different width:100%. width:auto expand width of element horizontal space within containing block. since space on within of containing block doesn't count borders/padding/margins.
width:100% width:auto and adds width of borders/padding/margins of containing element. difference between width auto , width 100 percent provides visual demonstration.
so, when set width:auto on position:fixed element, , position:fixed shrink-wrapped element's width of content (which nothing), width automatically adjusted of containing element, in case _____ (what? , why did have width of zero?).
when set width:100% includes padding/margins/border of _____ (what? , why did expand cover whole page horizontally?).
the reason because both fixed , absolute positioning take element out of flow of document. residual effect of that, unless explicitly told otherwise, element grow/shrink according size of content rather size of parent.
as you've discovered, simple prepare give width of 100 percent:
.fixed-element{ position:fixed; width:100% } to address issue of quote on fixed positioning:
whereas position , dimensions of element position:absolute relative containing block, position , dimensions of element position:fixed relative initial containing block. viewport: browser window or paper’s page box.
i find quite poorly worded. it's not meant dimensions grow size of viewport. instead it's trying distinguish specific differences between absolute , fixed positioning. more thoroughly put: dimensions/size of fixed element relative initial element. whereas dimensions/size of absolute element relative containing element. doesn't explicitly mean actually take 100% of viewport default...
html css
No comments:
Post a Comment