Where does this extra space come from in my HTML structure?

<body>

<header>

<a href="new-wc3.html">Cities of the world</a>

</header>

<div id="main">

<nav>

<a href="new york page.html">New York City</a>

<a href="#2">Los Angeles</a>

</nav>

<section>

<aside class="sidebar">

<p>This should be a sidebar</p>

</aside>

<article class="pics">

<h2>Please select a city.</h2>

</article>

<article class="general-info">

<h2>Please select a city.</h2>

<p></p>

<p></p>

<p></p>

</article>

</section>

<footer>

<p>Copyright &copy; 2020, Cities of the World</p>

</footer>

and CSS:

article {

background-color:white;

height:500px;

padding: 20px;

margin-bottom:;

overflow:auto;

width:78(p);

border:1px solid lightgray;

}

footer {

background-color:lightgray;

color:black;

font-size:20px;

padding:5px;

position:relative;

bottom:0;

width:100(p);

text-align:center;

margin-top:;

}

section {

background-color:;

padding:30px 30px;

margin-top:-4px;

}

body {

background-color:#f1f1f1;

}

.general-info ol {

margin-left:15px;

}

.general-info li {

padding:10px;

font-size:20px;

}

.sidebar {

position:absolute;

right:1(p);

width: 300px;

height:100(p);

background-color: white;

margin-right:0;

border:1px solid lightgray;

}

If i set position relative to the "section", the height of the "sidebar" goes all the way down to the footer. If i remove the relative position of "section" the height of the sidebar stops in the middle of the distance. What is that space occupied with? Where does it come from?

Update:

(p) = percent. Also, why is having a normal position makes the sidebar height not expand to the bottom of the container section? Shouldn't not having any position of the container section make the sidebar be outside the document flow, and therefore expand all the way down to the end of the html page? 

4 Answers

Relevance
  • oyubir
    Lv 6
    1 month ago
    Favourite answer

    Again as I told you in my last comments on your previous question (not sure you saw them) it is because position:absolute/relative remove elements from the flow.

    When section position is static (the default), your sidebar is not (as far as flow is concerned) inside the section. Because it is position:absolute, and the section is not.

    So size percentage of sidebar are relative to whatever it is in. And that is not "section". I mean, the "aside" is not constraint by "section" size. It is "position:absolute", which means that it has nothing to do with "section" flows. It doesn't share space with other elements of the "section"

    If one of the parents of "aside" is also absolute (or relative), then percentage are expressed relative to that parent. That is the rule: height: x% in a position:absolute element means x% of the height of the first parent whose position is not static (that whose position is absolute, or relative, or fixed, or sticky)

    So the 2 cases you have mentioned:

    *) If "section" is "position:relative", then since "aside" is "position:absolute" (both are non static), so % units in "aside" are % of "section" height (including padding and border)

    "section" size is computed from its content.

    Its content are two "articles" of 500px ("aside" does not contribute to its content size,since it is position:absolute, so removed from the flow)

    Each of them with a padding of 20px top and bottom.

    And a border of 1px. Top and bottom too.

    So 500+500+20×4+1×4 = 1084 px (2 500px article, 2 paddings and 2 borders for each)

    That is for the content of the "section".

    But you added also a padding of 30px to the section itself; and no border. So 60px are added to the overall size of "section".

    -> 1144 px.

    That is the base of % unit for "aside".

    100% means 1144px.

    *) If "section" is not "position:relative" (or any non static position — so, double negation, that means "if section position is static"), then we have to look to the next parent. Which is "div#main". Which also have a static (default) position.

    So, next parent: body. Also static. So, since we have nothing, % in "aside" are based on the height of the screen

    You can easily check that it is exactly so (can't give pixels values here: it depends on your screen. But if you move the scroll bar so that top of "aside" is exactly at the top of the screen,  you'll see that bottoms also coincide.

    I know it can seem overly complicated. I remember that I was finding those kind of rules too complicated, when a started this, and was (as I guess you are doing) reverse engineering the logic, instead of taking time to read the exact rules.

    But once you understand the rules, and the usage, they make lot of sense, on the contrary.

    If you position you "aside" absolute, that means that you shouldn't care about the size of the flow it is in. So it is quite logical that you may want to speak in % of the window size. Rather than in % of a container whose size is irrelevant to "aside", since you removed "aside" from its flow.

    Unless, that container is also an "absolute" or "relative" positioned one. Then we surmise that "aside" absolute positioning is part of a bigger "absolute positioned" element. And then it makes sense to use "%" of that element.

    tl;dr:

    for a non-static positioned element (absolute, fixed, relative,...) height % means "% of the height of the first parent whose position is also non static, if there is one, or % of the height of the screen — I mean browser window — otherwise".

    "aside" is non-static (absolute). So "100%" means "size of 'section', including border and padding" if section is also non-static (relative). Here 1144px.

    And means "size of the browser window" if section is static positioned (since other parents are also static)

    • ...Show all comments
    • ILoveCoffee
      Lv 5
      1 month agoReport

      Thanks again for making that clear. And no, i was never trying to challenge you, just trying to understand. 

    • Commenter avatarLog in to reply to the answers
  • 1 month ago

    Add this to your css "body" definition.

    height: 100%;

    Without that, heights generally have no "full size" reference to scale to.

    • Commenter avatarLog in to reply to the answers
  • Anonymous
    1 month ago

    1)<!DECLTYPE html> missing

    2) <head> missing

    3) class="pics" undefined in CSS

    4) No link for the <style> file.

    5) <div id="main"> but no </div>

    <body> but no </body>

    6) spaces not allowed in link names 

    <a href="new york page.html">

    7) missing values

     margin-bottom:;

     margin-top:;

     background-color:;

    8)

    illegal values, you should have % here

    78(p);

     width:100(p);

     right:1(p);

    height:100(p);

    • Commenter avatarLog in to reply to the answers
  • Bill-M
    Lv 7
    1 month ago

    I would say the extra <p></p>  Tags  =  they add a new line for each one.

    • oyubir
      Lv 6
      1 month agoReport

      Nope. Not at all the problem. You can remove all <p> and problem remain the same. See my answer. Size is very predictible. I did the math, and find, in both cases, the exact, to the pixel, same size as the one displayed by my browser when I copy the code in it. Nothing strange here.

    • Commenter avatarLog in to reply to the answers
Still have questions? Get answers by asking now.