TedoDec TedoDec - 7 months ago 97
HTML Question

CSS Layout Problems, FlowChart Design

i need to build a dynamic template to create a flow chart diagram, but only with HTML and CSS

See Image.

enter image description here


  • The black DIV should have a defined width and height.

  • The red DIV represent a row in the black DIV.

  • The green DIV are boxes with a border and a defined size with 100px height and 200px width.

  • It should be possible to add two or more green DIVs into one red DIV (See yellow rect)

  • All the content should align in the middle (See blue line)





.page {
position: relative;
width: 800px;
height: 800px;
}

.row{
width: 100%;
text-align: center;
margin-bottom: 10px;
}

.element{
display: inline-block;
text-align: center;
width: 200px;
height: 50px;
border: 1px solid #000;
}

<div class="page">
<div class="row">
<div class="element">Start</div>
</div>
<div class="row">
<div class="element">Step_1</div>
<div class="element">Step_2</div>
</div>
<div class="row">
<div class="element">Step_1_2</div>
</div>
<div class="row">
<div class="element">Ende</div>
</div>
</div>





Maybe someone can help me to implement the layout.
Thank you

Answer

I think you are looking for something like this: https://jsfiddle.net/m1pz6zcu/

.page {
  width: 400px;
  height: 400px;
  border-style: solid;
  border-width: 1px;
  text-align: center;
}

.row {
  width: calc(100% - 2px);
  border-style: solid;
  border-width: 1px;
  border-color: red;
  display: flex;
  height: calc(25% - 2px);
}

.element {
  min-width: 20%;
  border-style: solid;
  border-width: 1px;
  border-color: green;
  margin-right: auto;
  margin-left: auto;
  height: 50px;
  height: calc(100% - 2px);
}