Create 3 boxes layout with html and css-CodePudding

I want to code a simple layout which should look like this: boxes for better usability for responsive adjustement later

I created an div-box with display flex and a width of 100 percent inside the blue background. In this div i put 2 further divs which adjust automatically.

Then I added a div for the upper box which should stretch all over the whole box. I tried display: inline-flex with a width of 100% but unfortunately it didnt work.

I dont know what I can do to get this, can anybody help me with this?

Big thanks!

CodePudding user response：

Use div on top with 100% as single div and 2 divs in bottom use as 3 divs (1 "container" ) and 2 child divs. And then you can use display flex in "container" and they will go 50% each .

CodePudding user response：

One of the ways is to break the layout into rows. You need two rows. One with 100% width. The other one with two columns each 50% width. Now put it into HTML. Div is a block, so it will occupy 100% of width by default. The second row will be flex so that its children take place side by side.

/* Just some styling, not important */
.row-one, .column {
  border: 2px solid black;
  margin: 2px;
  padding: 1rem;
}

.row-two {
  display: flex;
}

.column {
  width: 50%;
}

<div class="row-one">Some text</div>
<div class="row-two">
  <div class="column">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
  </div>
  <div class="column">
    <p>More text</p>
  </div>
</div>