Why Does My Content Not Display?

Really unsure as to why my HTML content is not displaying inside the divs. Everything looks correct, It is just not displaying the content. Here is a snippet: Any ideas on how to

Solution 1:

Because you have set font-size: 0; on the parent wrapper and haven't reset it for the child divs.

So, when using em (which is a proportinal value based on the parent's font size) 1.8em would still be 0 because 1.8 x 0 is still 0.

It's not necessary when using flexbox anyway. Just remove it.

* {
  margin: 0;
  padding: 0;
}
main {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
header {
  width: 100%;
  height: 18vh;
  background-color: orange;
}
aside {
  width: 20%;
  height: 82vh;
  background-color: orange;
}
section {
  width: 80%;
  height: 82vh;
  background-color: darkgrey;
  box-shadow: 5px5px5px inset;
}

<mainid="content"><header><h1>Just a random Header</h1></header><aside><p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p></aside><section><p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p><p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p><p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p><p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p></section></main>

Solution 2:

I don't know why but main's font-size is getting more weightage than section.

main {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /*font-size: 0;  Removes White space */
}
header {
    width: 100%;
    height: 18vh;
    background-color: orange;
    font-size: 1.8em;
}
aside {
    width: 20%;
    height: 82vh;
    background-color: orange;
    margin: 0 auto;  
    font-size: 1.2em; 
}
section {
    width: 80%;
    height: 82vh;
    background-color: darkgrey;
    margin: 0 auto;   
    box-shadow: 5px5px5px inset; 
    font-size: 1.2em;
}

<mainid="content"><header><h1>Just a random Header</h1></header><aside><p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p></aside><section><p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p><p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p><p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p><p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p></section></main>

Solution 3:

It's because you are using em as units. And em means # times of current font size and your current font size is set on .main {font-size: 0}

main {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0;
  /* Removes White space */
}
header {
  width: 100%;
  height: 18vh;
  background-color: orange;
  font-size: 18px;
}
aside {
  width: 20%;
  height: 82vh;
  background-color: orange;
  margin: 0 auto;
  font-size: 16px;
}
section {
  width: 80%;
  height: 82vh;
  background-color: darkgrey;
  margin: 0 auto;
  box-shadow: 5px5px5px inset;
  font-size: 16px;
}

<mainid="content"><header><h1>Just a random Header</h1></header><aside><p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p></aside><section><p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p><p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p><p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p><p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p></section></main>

Solution 4:

The problem is that you set the font size to 0 in .main. In the rest of the code, you are using ems.

The problem is that em units are calculated based on the containing element's font size. From then on, 1 em = 1 unit of the containing elements font size. So since you've set the containing elements font size to 0, then no matter what you set it to in the other elements, it will always stay at 0, thus not displaying your text.

Try changing the .main font size to 12px.