CSS Layout Problems, FlowChart Design

Question

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

See Image.

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

please try at least a couple of css display so we can talk about something ... your edit is a good start, but doesn't help you much more ;) — G-Cyrillus
try to learn basics of css positioning from developer.mozilla.org/en-US/docs/Web/CSS — Ankit Agarwal
Sure, your right. But i must fix the problem for a customer and css is not business. And iam run out of time, so your are my last hope to fix the issue. — TedoDec
Maybe you need a professionnal and charge your customer for this :( — G-Cyrillus

Adam Buchanan Smith Adam Buchanan Smith · Accepted Answer · 2016-05-03T17:14:34

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);
}

CSS Layout Problems, FlowChart Design

1 Answers