Automatic Width of Footer in example text


#1

why does the #footer ID not have to specify anything about the width in this example? Yet the width goes nearly perfectly across the page. I've tried removing elements in the CSS and removing text in html but it doesn't change width. Maybe not that important but curiosity is distracting me.

footer {

position: relative;
height: 50px;
background-color: #668284;
clear: both;
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
color: #ffffff;

}


#2

@webslayer11436,

A HTML-div-Element is a so-called block-level-Element
and a block-level-Element
will always try to expand itself across the full width of your HTML-page....

google search
== the Book ==
block element site:developer.mozilla.org
https://developer.mozilla.org/nl/docs/Web/HTML/Block-level_elements


#3

really simple example here, as you can see, a block level element will always try to be as wide as possible (it is 100% in width) but body has a margin, if you remove it:

body { margin: 0; }

you will see the div span the entire page, hope this helps