when an element's width is undefined, what determines it?

[bartonlewis]

I have a number of web pages that are controlled by an external style sheet.  I am pasting the css stylesheet in its entirety.  My questions are:  all of the web pages have an html and body element with a width of 1108px.  (1) What is determining the width of these 2 elements?  (2) What is the best practice for defining these elements?  I want the web pages to be responsive to different browser sizes.  Does defining  fixed width constrain an element's responsive behavior?

 

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*THIS IS THE END OF THE MYER RESET*/

body {
    font-family: "europa",sans-serif;
    margin: 0;
}
.parallax { 
    /* The image used */
    background-image: url("img_bckgd_windows_7283_1920-3.jpg");
 
    /* Set a specific height */
    height: auto; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
    
    padding-bottom: 1%;
}
h1 {
    font-family: "europa",sans-serif;
    font-size: 3.6em;
    letter-spacing: .3em;
    text-align: center;
    color: black;
    padding: 5% 0;
    padding-top: 7%;
    }
h2  {
    font-family: "europa",sans-serif;
    font-size: 2.8em;
    color: black;
    letter-spacing: .2em;
    text-align: center;
    padding-bottom: 5%;    
    }
h3 {
    font-family: "europa",sans-serif;
    font-size: 2.2em;
    color: black;
    letter-spacing: 1.5px;
    text-align: center;
    padding-bottom: 1%;
    }
h4 {
    font-family: "europa",sans-serif;
    font-size: 2em;
    color: black;
    letter-spacing: 1.5px;
    text-align: center;
    padding-bottom: 1%;
    }
.container_blank_space_small {
    height: 26px;
     }
.container_blank_space_big {
    height: 39px;
     }
.container_blank_space_big p, .container_blank_space_small p {
    text-indent: -9999px;
    }
.flex-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0 50px 50px 50px;
    padding-bottom: 30px;
    align-items: center;
    justify-content: center;  
    font-family: "europa",sans-serif;
    font-size: 105%;
    }
.nav {
    margin: 0 30px;
    }
a   {
    text-decoration: none;
    color: black;
    }
div.nav a {
    font-size: 1.8em;
    }
.category {
    margin: 7% 0;   
    }
.container {
    width: 100%;
    margin: 0 auto;
    }
.container p {
    font-size: 1.6em;
    margin: 10% 30%;
    line-height: 125%;
    }
.wallcut {
    margin: 6% auto 10%;
    }
div.wallcut p {
    text-align: center;
    font-size: 1.2em;
    margin: 4% auto 5%;
    }
.underline {
    text-decoration: underline;
    font-variant: small-caps;
    }
a:hover {
    text-decoration: underline;
}
* {
    box-sizing: border-box;
}
img {
  vertical-align: middle;
}
.center_width {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 58%;
}
.center_height {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 24%;
}    
.center_oversize {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}    
p.return {
    font-size: 2em;
    }
footer {
    background: #827e90;
    height: 75px;
    margin-top: 5%;
    }
footer p {
    padding: 25px;
    font-family: "europa",sans-serif;
    font-size: 100%;
    letter-spacing: .8px;
    color: white;
    }
.flex-container-footer {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    padding-top: 0px;
    justify-content: space-between;
    align-items: center;
    }
.flex-container-footer>div {
    margin: 0px 50px;
}
.social a {
    color: white;
    }
.fa {
    padding: 10px;
    font-size: ;
    width: ;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
}
.copyright p {
    font-family: "europa",sans-serif;
    color: black;
    font-size: 80%;
    letter-spacing: .8px;
    line-height: 135%;
    font-weight: 500;        
    }
/*---------------MEDIA!!!------------*/
@media screen and (max-width: 768px) {
h1  {
    font-size:  2em;
    }
h2  {
    font-size: 1.4em;
    }
h3  {
    font-size: 1.2em;
    }
h4  {
    font-size: 1em;
    }
div.wallcut p {
    font-size: .9em;
    }
p.indent1   {
    font-size: 1em;
    }
div.nav a {
    font-size: 1.3em;
    }
div.about p {
    font-size: 1.25em;
    }
}
@media screen and (max-width: 1366px) {
h1  {
    font-size:  2.6em;
    }
h2  {
    font-size: 2em;
    }
h3  {
    font-size: 1.6em;
    }
h4  {
    font-size: 1.3em;
    }
.indent1   {
    font-size: 1em;
    }
div.nav a {
    font-size: 1.3em;
    }
div.about p {
    font-size: 1.25em;
    }
p.return {
    font-size: 1.3em;
    }
}

 

[Ingolme]

Block elements, such as <html>, <body>, <div> and <h1> have the width of their container by default. The container of <body> is <html>, the container of <html> would be the window itself. If a block element with undefined width has margin, padding or borders then these are subtracted from the width so that the sum of the width with these will fit inside the container without the need of a horizontal scrollbar.

If you specifically set the width of a block to 100% then this behavior breaks, the width of the content becomes as wide as the container, and then margin, padding and borders are added on top of that, forcing a horizontal scroll bar to appear. You will almost never come across a scenario where the width has to be specifically set to 100% in a normal layout.

The regular behavior also breaks if you use float, absolute positioning or flex box. Each of these has their own set of rules for calculating width.

 

[bartonlewis]

Thank you.  When you say "the container of the <html> would be the window itself," then if I am on a 1366px monitor, shouldn't the width be 1366px, and if I am on a 1920px monitor, shouldn't the width be 1920px?  Or does "window" mean something other than the screen size of your device?  My page has an html width of 1108px on my 1366px monitor, and a width of 1348px on my 1920px monitor.  The width of the <html> isn't taking its width from one of its child elements, is it? 

[Ingolme]

If you don't have any CSS specifying otherwise, the <html> element should be 1366px on a 1366 monitor. If the width is any smaller than that then there is CSS in your stylsheet that is changing its size. Some of your classes might be affecting the <html> or <body> elements, but I can't tell because I don't know what the HTML of your page looks like. CSS without HTML does not show the whole picture.

[bartonlewis]

Thank you.  I stripped all but the first image on the page to make it leaner, and pasted it below.  (Doing this did not affect the results that "inspect element" was reporting in Chrome and Safari.)  If you wouldn't mind taking a look, I'd be greatly appreciative.  Chrome reports 1108px for the html and body elements, and Safari reports 756px.  Microsoft Edge didn't report a pixel size, but it says "box-sizing: border-box."  This is the value assigned to the universal selector.  I wondered if was the culprit and deleted it and no change.  The only other thing that I thought could be responsible was the "center-width" class in the image.  But I still don't understand why the 2 browsers report different widths, in addition to what is actually determining the widths that are reported (for <body> and <html>).

 

<!DOCTYPE html>
<html>
<head><link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="https://use.typekit.net/qkv6kzb.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
    <script src="https://use.typekit.net/qkv6kzb.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
    <meta charset="UTF-8">
<title>Barton Lewis - photography - wall cuts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
    
<div class="parallax">
    <h1 style="text-align:center">Barton Lewis</h1>
    <h2 style="text-align:center">wall cuts</h2>
<section class="flex-container">
    <div class="nav"><a href="index.html" title="home">home</a></div>
    <div class="nav"><a href="bartons_film_site_works.html" title="works">works</a></div>
    <div class="nav"><a href="bartons_film_site_bio.html" title="bio">bio</a></div>
    <div class="nav"><a href="bartons_film_site_cv.html" title="c/v">c/v</a></div>        
    <div class="nav"><a href="bartons_film_site_contact.html" title="contact">contact</a></div>
</section>
        </div>
    
<div class="category">
    <h3 style="text-align:center">Blacks</h3>
        </div>  
    
<div class="container">
        <div class="wallcut">
            <img src="http://bartonlewisfilm.com/img_287-135.jpg" alt="287-135, Flushing Ave., IND Crosstown Line"  class="center_width">
                <p>287-135, Flushing Ave., IND Crosstown Line</p>
                    </div> 
   </div>

        <p class="return" style="text-align:center"><a href="photography_rework.html">Back</a> to main wall cuts page.</p>

    <footer>
    <div class="flex-container-footer">
        <div>
            <p>copyright © 2018 by Barton Lewis</p>
        </div>
        <div class="social">
            <a href="https://www.facebook.com/profile.php?id=1410465690" class="fa fa-facebook"></a>
            <a href="https://www.instagram.com/bartonlewis2328/" class="fa fa-instagram"></a>
        </div>
    </div>
    </footer>
    
<script>

</script>
    
</body>
</html>

 

[Ingolme]

I don't see an issue with this code. I tested it in Firefox and Chrome, the body element is taking the full width of the window as expected.

[bartonlewis]

Okay.  I don't understand why my 1366px monitor reports 1108px and 756px on the 2 different browsers, and the 1920 monitor reports 1348px.  Oh well, thanks anyway.

[Ingolme]

How are you measuring the elements?

[bartonlewis]

On the page, I am right clicking in the area that I want to inspect and then selecting "Inspect" (in Chrome) or "Inspect element" (in Opera - I may have misspoke earlier and said Safari).  In the panel that comes up, I am clicking on the elements I want to see results for.