How to make this layout using simple techniques or old ones? Notice that the Flex-box and Grid are not allowed to be used. I've tried some much and something is missing.
Is it good practice to make some classes in the same name in HTML or make a parent in that name and they would inherit it?
Do we usually use inline-block in the display to make the layout?
I want to make gaps before and after each element. I want to make it as same as the attached pic.
I expected to have the 1/3 in one line,
and 1/2 in one line, and 1/4 in one line, like the attached Pic, but I couldn't do that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/style.css" />
<title>Assignment 1</title>
</head>
<body>
<div class="parent">
<div class="ch1">Full width</div>
<div class="ch2">1/3</div>
<div class="ch2">1/3</div>
<div class="ch2">1/3</div>
<div class="ch3">1/2</div>
<div class="ch3">1/2</div>
<div class="ch4">1/4</div>
<div class="ch4">1/4</div>
<div class="ch4">1/4</div>
<div class="ch4">1/4</div>
</div>
</body>
</html>
.parent {
width: 800px;
background-color: rgb(133, 129, 124);
}
.ch1,
.ch2,
.ch3,
.ch4 {
padding: 15px;
background-color: #eee;
text-align: center;
margin: 15px 0;
}
.ch2 {
display: inline-block;
width: calc((100% - 60px) / 3);
}
.ch3 {
display: inline-block;
width: calc((100% - 45px) /2);
}
.ch4 {
display: inline-block;
width: calc((100% - 75px) /4);
}
How to make this layout using simple techniques or old ones? Notice that the Flex-box and Grid are not allowed to be used. I've tried some much and something is missing.
Is it good practice to make some classes in the same name in HTML or make a parent in that name and they would inherit it?
Do we usually use inline-block in the display to make the layout?
I want to make gaps before and after each element. I want to make it as same as the attached pic.
I expected to have the 1/3 in one line,
and 1/2 in one line, and 1/4 in one line, like the attached Pic, but I couldn't do that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/style.css" />
<title>Assignment 1</title>
</head>
<body>
<div class="parent">
<div class="ch1">Full width</div>
<div class="ch2">1/3</div>
<div class="ch2">1/3</div>
<div class="ch2">1/3</div>
<div class="ch3">1/2</div>
<div class="ch3">1/2</div>
<div class="ch4">1/4</div>
<div class="ch4">1/4</div>
<div class="ch4">1/4</div>
<div class="ch4">1/4</div>
</div>
</body>
</html>
.parent {
width: 800px;
background-color: rgb(133, 129, 124);
}
.ch1,
.ch2,
.ch3,
.ch4 {
padding: 15px;
background-color: #eee;
text-align: center;
margin: 15px 0;
}
.ch2 {
display: inline-block;
width: calc((100% - 60px) / 3);
}
.ch3 {
display: inline-block;
width: calc((100% - 45px) /2);
}
.ch4 {
display: inline-block;
width: calc((100% - 75px) /4);
}
2 Answers
Reset to default 1One of the "old" techniques is to use a <table>:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
table {
--gap: 12px;
border-spacing: var(--gap);
width: 100%;
table-layout: fixed;
td{
padding: 6px 12px;
background-color: #eee;
text-align: center;
}
}<table>
<tr>
<td colspan="12">Full width</td>
</tr>
<tr>
<td colspan="4">1/3</td>
<td colspan="4">1/3</td>
<td colspan="4">1/3</td>
</tr>
<tr>
<td colspan="6">1/2</td>
<td colspan="6">1/2</td>
</tr>
<tr>
<td colspan="3">1/4</td>
<td colspan="3">1/4</td>
<td colspan="3">1/4</td>
<td colspan="3">1/4</td>
</tr>
</table>There are two problems. First, even if you have set margin: 0, inline-block elements can have horizontal spaces between them, so it is necessary to put the tags next to each other. The second problem is that the padding: 15px property occupies 15px on the right side and 15px on the left side, so you must add 15 + 15 = 30 and then multiply by the number of elements. The formula would be: calc((100% - X) / N), where N is the number of elements and X = 30px * N. For example, for the 1/3 case it would be: calc((100% - 30*3) / 3). I hope this solution helps you:
.parent {
width: 800px;
background-color: rgb(133, 129, 124);
padding: 10px;
}
.ch1,
.ch2,
.ch3,
.ch4 {
padding: 15px;
background-color: #eee;
text-align: center;
margin: 15px 0; // You could add a margin to separate the <div> but then you have to add that margin in the calculation of the calc(100% - X) / N function
}
.ch2 {
display: inline-block;
width: calc((100% - 90px) / 3);
}
.ch3 {
display: inline-block;
width: calc((100% - 60px) /2);
}
.ch4 {
display: inline-block;
width: calc((100% - 120px) /4);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/style.css" />
<title>Assignment 1</title>
</head>
<body>
<div class="parent">
<div class="ch1">Full width</div>
<div class="ch2">1/3</div><div class="ch2">1/3</div><div class="ch2">1/3</div>
<div class="ch3">1/2</div><div class="ch3">1/2</div>
<div class="ch4">1/4</div><div class="ch4">1/4</div><div class="ch4">1/4</div><div class="ch4">1/4</div>
</div>
</body>
</html>