DIV in table does not stretch like it should

Question

Edit: it seems that the easy solution is to take the #menu div out of the container, but from how I was just taugh css-tables, I thought it would make more sense to put it inside the container and give it it's own row. I still don't understand why that does not work.

I am learning how to arrange my page in tables with CSS and HTML and I've run into an odd problem that I don't understand.

I want the #menu div in a row of its own and stretching to the length of the header. It does so perfectly, but when I add a new row underneath it with my #content and #sidebar divs that I also want to stretch to the length of the header, the #menu width gets cut off and the #content and #sidebar divs also do not stretch all the way horizontally like I would like them to.

If it sounds confusing just preview the code and it should be pretty obvious what I'm trying to do.

I feel like there is some simple thing that I am missing. I am trying to do this without using absolute positioning but strictly the table-layout.

Can someone see what I'm doing wrong here?

Thanks 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 pariatur. Except
        </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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        </div>
      </div>
    </div>
    <footer>asdas</footer>
  </body>
</html>

At `#comment {...}` in the CSS, did you mean to write `display: table-cell` instead of just `table-cell`? — shreyasm-dev, Aug 24 '20 at 13:42
Thanks @GalaxyCat105, I did. That fixes one issue with the width of the second row, but the menu is still not stretched out properly. Hmm... — ofg, Aug 24 '20 at 14:14
`Width: auto;` to stretch a div over it full parents space. With `Width: 100%;` you will get issues as you use the parents width and will take padding and margins then on top. Means you will get scrollbars. — tacoshy, Aug 25 '20 at 09:07

score 0 · Answer 1 · answered Aug 24 '20 at 14:24

You need to replace table-cell with display: table-cell; in #content. Essentially to solve problem you need to apply column spanning on #menu but unfortunately both row and column spanning isn't supported by CSS yet. You can read further discussion related to this topic on: HTML colspan in CSS

score 0 · Answer 2 · answered Aug 24 '20 at 14:37

You can use the attribute colspan="value" with the td tag but you can not use this with a div tag.

<table style="width:100%">
  <tr>
    <th colspan="2">Menu</th>
  </tr>
  <tr>
    <td>Sidebar</td>
    <td>Content</td>
  <tr>
</table>

You could use flexbox to achieve this Flexbox Overviewhttps://css-tricks.com/snippets/css/a-guide-to-flexbox/ ExampleDemo Flexbox 3

score 0 · Answer 3 · answered Aug 24 '20 at 22:17

Well I guess you should learn how to use a grid instead. Its better to use then a table. Also my original frame I gave you, hat the menu inculded into the header for the sole reason that it stays at top with it. To understand my frame which you trying to use, you have to see that there 3 parts of the site: Header, Content and Footer.

The Header is everything what should be displayed at the top for every side including the title and the menu (navagiation bar). The Footer is an optional thing, same as the header always the same content while displaying it at the bottom. The Content however is what chanegs always. Thats why I gave it to you originally as ID not as class. Its a "wrapper" for everything. The class section, is that what displays the different parts. I followed the other issues you had so far (and proberly will keep doing that and be your personal guide if you want!).

Ok now to the current issue:

html {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
}

#title {
  height: 200px;
  width: auto;
  background-color: green;
  margin: 0 0 10px 0;
}

#menu {
  background-color: green;
  padding: 60px;
  width: auto;
  margin: 0 0 10px 0;
}

#content {
  width: 100%;
  margin: 0 0 10px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10px;
  grid-auto-rows: auto;
  grid-template-areas:
    "SectionSidebarLeft SectionSidebarRight";  
}

#sectionSidebarLeft {
  padding: 10px;
  background-color: green;
  grid-area: SectionSidebarLeft;
}

#sectionSidebarRight {
  padding: 10px;
  background-color: green;
  grid-area: SectionSidebarRight;
}

footer {
  background-color: green;
  height: 200px;
  width: auto;
}

<!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>
      <div id="title">sdf Lorem ipsum</div>
      <div id="menu">sdf Lorem ipsum dolor sit amet,</div>
    </header>
    <div id="content">
      <div id="sectionSidebarLeft">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 pariatur. Except
      </div>
      <div id="sectionSidebarRight">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>
    <footer>asdas</footer>
  </body>
</html>

tacoshy, thanks for following me and being my teacher here. The generosity is much appreaciated and most of all very helpful. The book I'm learning from is from 2012 so I didn't know about grid. After your post and seeing how you used it, I decided to spend this day learning it because it does seem to be better than tables! Thanks and I will see you in the next post (hopefully) ;-) — ofg, Aug 25 '20 at 09:28
just a follow up: I've played around with grid now and obviously I'm trying to keep things to the bare minimum for the sake of taking things step by step. In #content, all I set was display: grid, grid-template-columns: 1fr 1fr; and the column-gap, and I got the same reulsts as you. So would you mind explaining why you added in "repeat (2, 1fr)" and named the template-areas, when it seems like it is not necessary? Just trying to understand. Thanks. — ofg, Aug 25 '20 at 13:17
of course, that will make it easier to edit and use more columns if you want. if you want 4 columns instead of 2 you simply switch the 2 with a 4 `grid-template-columns: repeat(4, 1fr)`. Of course you still have to define then the columns in the `grid-template-areas`. Repeat will auto calculate the needed width to make the rows the same size will not exeeding the maximum width of the parent. — tacoshy, Aug 25 '20 at 13:22

DIV in table does not stretch like it should

3 Answers3