CSS how to stack div's one on top next to a primary div

Question

How do you accomplish the following HTML table using div's and css?

<table border="1">
  <tbody>
    <tr>
      <td rowspan="2">Form Location</td>
      <td rowspan="1">Filter Location</td>
    </tr>
    <tr>
      <td rowspan="1">Data Location</td>
    </tr>
  </tbody>
</table>

use bootstrap's grid system or see this question https://stackoverflow.com/questions/16351404/bootstrap-combining-rows-rowspan — Daniela Tanuseva, Jan 17 '18 at 12:42
On the client site flex doesn't work and I would have to get approval to use bootstrap which seems excessive to accomplish what I am looking for. Obviously, I can make the `table` work but I think its bad form. — acr_scout, Jan 17 '18 at 12:49
What was this voted down? The question was very specific. I wanted `css` method of accomplishing the task rather than using `table`s. — acr_scout, Jan 17 '18 at 12:55
because looks like you did not try to learn how to do it, just came here to get your job done for someone else — LPZadkiel, Jan 17 '18 at 13:09
@LPZadkiel that is quite the assumption. I did try to figure it out myself but since I am not an artist I have trouble with CSS. I needed a little boost; I thought that is what this forum is all about. Nitin Dhomse did just that. I am not an HTML, CSS guy by trade. — acr_scout, Jan 17 '18 at 13:22
yeah the thing is you did not post what you have tried so leave a window open to think that you havent even try. I didnt downvote but i understand the one who did it — LPZadkiel, Jan 17 '18 at 13:48

score 1 · Accepted Answer · answered Jan 17 '18 at 12:47

1

You can change your DOM structure table to div as follows:

<div style ="width : 300px;">

  <div style = "float : right">
   
    <div>Filter Location</div>
    <div>Data Location</div>
  </div>
  <div style = "float : left">
 <div>Form Location</div>
   
  </div>

</div>

answered Jan 17 '18 at 12:47

Nitin Dhomse

2,524
1
12
24

This looks very promising. – acr_scout Jan 17 '18 at 12:50

score 0 · Answer 2 · answered Jan 17 '18 at 12:40

Piece of cake with Flexbox.

div {
  padding: 2px;
  border: #00f solid 1px;
}
.main {
  display: inline-flex;
}
.main .left {
  display: flex;
  align-items: center;
}
.main .right {
  display: flex;
  flex-direction: column;
}

<div class="main">
  <div class="left"><span>Form location</span></div>
  <div class="right">
    <div class="up">Filter location</div>
    <div class="down">Data location</div>
  </div>
</div>

score 0 · Answer 3 · answered Jan 17 '18 at 12:46

#container {
  display: inline-block;
}

#table {
  display: flex;
  border: 1px solid black;
  padding: 5px;
}

#left {
  border: 1px solid black;
  margin: 0 5px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5px;
}

#right {
  display: flex;
  flex-direction: column;
}

#right div {
  border: 1px solid black;
  padding: 5px;
}

#right div:first-child {
  margin: 0 0 5px 0;
}

CSS how to stack div's one on top next to a primary div

3 Answers3