AlbanianGamerYT AlbanianGamerYT - 1 year ago 91
CSS Question

Division not showing! Why?

So i have been working on making a website for me and my friends, and until now i have made the menu bar, and a communication space ( with

<div>
s). But I don't seem to make the second div to show up. Where is my problem? Why doesn't it show up?
Here's my code:



#MenuBar {
width: 100%;
height: 10%;
background-color: blue;
border-radius: 30px;
position: center;
display: fixed;
}
body {
background-color: black;
background-repeat: no-repeat;

}
#MenuTabs {
width: 75%;
height: 75%;
color: white;
position: center;
}
#Messenger {
width: 50%;
height: 50%;
background-color: white;
display: fixed;
}

<!-- The menu tab -->
<div id="MenuBar">
<table id="MenuTabs" cellspacing="1%" align="center">
<tr>
<td>Home</td>
<td>Lessons</td>
<td>Playground</td>
<td>About</td>
</tr>
</table>
</div>
<!-- Communication Tab-->
<div id="Messenger"></div>





As you can see, it only shows the menu bar, but it doesnt show the white-background div. Can you please help me with that?

Lal Lal
Answer Source

See this fiddle.

The reason why the second div was not showing up was because, you were using % as height for the <div>s. For using % as height, you'll have to apply height in % to all its parents. Hence, for it to work, you'll have to specify the height of body and html in %.

Thus, you'll have to add the below given style too to your CSS:

html,
body {
  height: 100%;
}