Switching from absolute back to static? relative? - html

Question

I would like to create a somewhat complicated layout for a web page. I'll explain using table-tags, but in reality (I think) I want it in div-tags.
I need the structure to fill the whole screen - the left and right half (1-9 and 10-18) should each take half the screen.
In each half, I want the upper and lower bars to have a set number of pixels (50?), and the middle fields to take the whole rest of the screen, vertically. In fact, fields 5 and 14 will take the most of the screen.
I have been successful in creating this layout using css with div position=absolute, but the positioning of the 16 little fields is very ugly, tedious and most likely not the right way to do it. Once I used absolute positioning I cannot use margins to keep distances between the little blocks, but this would be convenient.
I found posts using display=block or inline-block, but these do not work once position=absolute is set (I think so at least). I cannot get them to work inside my left and right half screens.
Without absolute positioning I have not been able to do the first split so that the whole visible width is used, yet no scrollbars appear.
Is there a way to do that?
<table border="0">
<tr>
<td>
<table border="1">
<tr><td>01</td><td>02</td><td>03</td><td>04</td></tr>
<tr><td colspan=4><br/>05<br/></td></tr>
<tr><td>06</td><td>07</td><td>08</td><td>09</td></tr>
</table>
</td>
<td>
<table border="1">
<tr><td>10</td><td>11</td><td>12</td><td>13</td></tr>
<tr><td colspan=4><br/>14<br/></td></tr>
<tr><td>15</td><td>16</td><td>17</td><td>18</td></tr>
</table>
</td>
</tr>
</table>

Answer 1

You can use display: flex property for the same.
Flex will take care of positioning as well as width/height of the divs by itself. Also, you can apply margin/padding with ease.
Please find the code snippet.
Hope it helps.
.parent {
display: flex;
flex-direction: row;
}
.col {
display: flex;
flex-direction: column;
}
.row1 {
display: flex;
flex-direction: row;
height: 50px;
}
.row2 {
padding: 10px;
}
.row3 {
display: flex;
flex-direction: row;
height: 50px;
}
.content {
margin: 5px;
padding: 5px;
}
.row1, .row2, .row3, .content {
border: 1px solid #000;
}
<div class = "parent">
<div class = "col">
<div class = "row1">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
</div>
<div class = "row2">
<div>5</div>
</div>
<div class = "row3">
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
</div>
</div>
<div class = "col">
<div class = "row1">
<div class="content">10</div>
<div class="content">11</div>
<div class="content">12</div>
<div class="content">13</div>
</div>
<div class = "row2">
<div>14</div>
</div>
<div class = "row3">
<div class="content">15</div>
<div class="content">16</div>
<div class="content">17</div>
<div class="content">18</div>
</div>
</div>
</div>