Div is not displayed on screen, am I missing some CSS properties? - html

Question

I have built this personal web page and for some reason, the last part of the page (a table container) is not displayed on the screen.
* {
padding: 0%;
margin: 0%;
}
body,
html {
height: 100%;
}
/* more CSS properties goes here (not relevant for this question)*/
#fotter {
height: 30%;
background-image: url(bottom.jpg);
background-size: cover;
opacity: 0.6;
display: flex;
}
#fotter-title {
position: absolute;
bottom: 22%;
left: 45%;
font-size: 250%;
}
#table-div {
display: table;
height: 100%;
}
#row-div {
display: table-row;
height: 100%;
}
.image-title {
display: table-cell;
background-size: cover;
background-repeat: no-repeat;
width: 30%;
height: 30%;
}
#first {
background: url(first.jpg);
width: 100%;
}
#second {
background: url(second.jpg);
height: 100%;
}
#third {
background: url(third.jpg.);
}
#forth {
background: url(forth.jpg);
}
<div id="heading"></div>
<h1 id="heading-title">Hi, my name is Imanuel Sinwany</h1>
<div id="body-div">
<div id="left-div">
<div id="body-text">
<p>...............</p>
<p>...............</p>
</div>
</div>
<div id="right-div"></div>
</div>
<div id="fotter">
<div id="table-div">
<div id="row-div">
<div id="first" class="image-div">
</div>
<div id="second" class="image-div">
</div>
<div id="third" class="image-div">
</div>
<div id="forth" class="image-div">
</div>
</div>
</div>
</div>
<h1 id="fotter-title">My Gallery</h1>
I have tried to include the relevant code.
My question is why I can't see the last table (inside "footer" div id) Am I missing some properties?
Thanks for the helpers!

Answer 1

The #table-div element needs a defined width. Otherwise it will collapse to zero pixels because there is no content within the child elements.
The bottom level divs should also use display: table-cell.
* {
padding: 0%;
margin: 0%;
}
body,
html {
height: 100%;
}
#fotter {
height: 30%;
background-image: url(bottom.jpg);
background-size: cover;
opacity: 0.6;
display: flex;
}
#table-div {
display: table;
height: 100%;
width: 100%;
}
#row-div {
display: table-row;
height: 100%;
}
#row-div > div {
display: table-cell;
outline: 1px solid orange;
}
#first {
background: url(https://placehold.it/100x100?text=FIRST);
}
#second {
background: url(https://placehold.it/100x100?text=SECOND);
}
#third {
background: url(https://placehold.it/100x100?text=THIRD);
}
#forth {
background: url(https://placehold.it/100x100?text=FORTH);
}
<div id="fotter">
<div id="table-div">
<div id="row-div">
<div id="first" class="image-div">
</div>
<div id="second" class="image-div">
</div>
<div id="third" class="image-div">
</div>
<div id="forth" class="image-div">
</div>
</div>
</div>
</div>

Answer 2

Have you thought about putting <table> instead of <div>?
<div id="heading"></div>
<h1 id="heading-title">Hi, my name is Imanuel Sinwany</h1>
<div id="body-div">
<div id="left-div">
<div id="body-text">
<p>...............</p>
<p>...............</p>
</div>
</div>
<div id="right-div"></div>
</div>
<div id="fotter">
<table id="table-div">
<tr id="row-div">
<td id="first" class="image-div"></td>
<td id="second" class="image-div"></td>
<td id="third" class="image-div"></td>
<td id="forth" class="image-div"></tr>
</tr>
</table>
</div>
<h1 id="fotter-title">My Gallery</h1>
And CSS:
* {
padding: 0%;
margin: 0%;
}
body, html {
height: 100%;
}
/* more CSS properties goes here (not relevant for this question)*/
#fotter {
height: 30%;
background-image: url(bottom.jpg);
background-size: cover;
opacity: 0.6;
display: flex;
}
#fotter-title {
position: absolute;
bottom: 22%;
left: 45%;
font-size: 250%;
}
table {
border: 1px solid red;
width: 100%;
height: 100%;
}
#row-div {
height: 100%;
}
#first {
background: url(https://placehold.it/100x100?text=FIRST);
}
#second {
background: url(https://placehold.it/100x100?text=SECOND);
}
#third {
background: url(https://placehold.it/100x100?text=THIRD);
}
#forth {
background: url(https://placehold.it/100x100?text=FORTH);
}