how to organize divs

Question

I want to organize divs like this with HTML and CSS:

I tried this :

.buttons-container {
  margin-left: 30px;
  height: 80px;
  width: 460px;
}

.child {
  display: inline-block;
  width: 460px;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 20px;
  vertical-align: middle;
}

<div class='parent'>
  <div class='child'>
    <button>button1</button>
  </div>

  <div class='child'>
    <button>button2</button>
    <button>button2</button>
    <button>button2</button>
    <button>button2</button>
    <button>button2</button>
  </div>

  <div class="buttons-container">
    <button>previous</button>
    <button>Next</button>
  </div>

but i got this as result:

So what's my fault? and how to do that?

Look at CSS grid and have a go at coding this - if still got a problem, put the code into your question with a description of what isn't working. — A Haworth, Jul 28 '23 at 14:27

score 0 · Answer 1 · edited Jul 28 '23 at 14:29

With flexbox, you can get this:

* {
  margin: 0;
  padding: 0;
}

body,
html {
  width: 100%;
  height: 100%;
  background: #efefef;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  width: 690px;
  height: 590px;
  border-radius: 8px;
  background: #dddbdb;
  box-shadow: 2px 2px 12px 2px #efefef;
  display: flex;
}

.container div {
  background: #fff;
}

.container .ab-wrapper {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ab-wrapper .a {
  width: 80%;
  height: 330px;
  margin: 6px;
  background: #ccc7c7;
}

.ab-wrapper .b {
  width: 80%;
  height: 220px;
  background: #999494;
}

.container .c-wrapper {
  width: 50%;
  height: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.c-wrapper .c {
  width: 100%;
  height: 556px;
  background: #999494;
  margin: 20px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <div class="ab-wrapper">
      <div class="a"></div>
      <div class="b"></div>
    </div>
    <div class="c-wrapper">
      <div class="c"></div>
    </div>
  </div>
</body>

</html>

You can adjust the code to resize the divs to your liking.

Grid is good to, it can simplify the process but I'm not very good with it yet so I decided to use flexbox. — AJ Ande, Jul 28 '23 at 14:32

how to organize divs

1 Answers1