After learning the basics of arranging pages with tables in CSS and HTML, I encountered a puzzling issue that I am struggling to comprehend.
The main objective is to have the #menu div in its row, stretching across the header's length. It accomplishes this perfectly. However, when I try adding a new row below it with the #content and #sidebar divs - intending for them to also span the header's width, the #menu div's width is cut off, and the #content and #sidebar divs fail to stretch horizontally as desired.
If my explanation seems convoluted, simply previewing the code should clarify my goal.
I suspect there is a simple oversight on my part. My aim is to achieve this layout without resorting to absolute positioning, strictly following the table-layout approach.
Could someone pinpoint where I am going wrong?
Thank you in advance.
html, body {
margin: 0;
}
header {
height: 200px;
margin: 10px 10px 0px 10px;
background-color: green;
}
#tablecontainer {
display: table;
border-spacing: 10px;
width: 100%;
}
.row {
display: table-row;
}
#menu {
display: table-cell;
background-color: green;
padding: 60px;
vertical-align: top;
}
#sidebar {
display: table-cell;
background-color: green;
vertical-align: top;
width: 50%;
}
#content {
table-cell;
background-color: green;
vertical-align: top;
width: 50%;
}
footer {
background-color: green;
height: 200px;
margin: 0px 10px 10px 10px;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<header>
sdf Lorem ipsum
</header>
<div id="tablecontainer">
<div class="row">
<div id="menu">sdf Lorem ipsum dolor sit amet,</div>
</div>
<div class="row">
<div id="sidebar">sdf Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sdf Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
</div>
<div id="content">sdf Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo...
</div>
</div>
</div>
<footer>asdas</footer>
</body>
</html>