# Creating a Rudimentary Layout

**URL:** <https://forum.kirupa.com/t/creating-a-rudimentary-layout/645679>\
**Category:** Uncategorized\
**Created:** [January 12, 2021, 6:53pm UTC](https://forum.kirupa.com/t/creating-a-rudimentary-layout/645679 "2021-01-12T18:53:27Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [January 12, 2021, 6:53pm UTC](https://forum.kirupa.com/t/creating-a-rudimentary-layout/645679/1 "2021-01-12T18:53:27Z")

</div>

I can’t figure out how to sort these three elements out such that

- the purple sits in the bottom of the container taking up the full width of the container
- the blue and yellow occupy the top half with the horizontal space divided equally between them

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

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .container {
          width: 600px;
          height: 800px;
          border: 4px solid black;
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
          align-items: flex-start;
          text-align: center;
        }
        .yellow {
          height: 400px;
          width: 300px;
          background: rgb(255, 251, 0);
          }
        .blue {
          height: 400px;
          width: 300px;
          background: rgb(0, 156, 247);
        }
        .purple {
          height: 400px;
          width: 600px;
          background: rgb(89, 0, 255);
          color: white;
          }
      </style>
    </head>

    <body>
      <div class="container">
        <div class="yellow">yellow</div>
        <div class="blue">blue</div>
        <div class="purple">purple</div>
      </div>
    </body>

    </html>

```

---

<div class="post-metadata">

**Author:** ![origslammer1](https://avatars.discourse-cdn.com/v4/letter/o/3da27b/32.png) [@origslammer1](https://forum.kirupa.com/u/origslammer1)\
**Post date:** [January 13, 2021, 3:30am UTC](https://forum.kirupa.com/t/creating-a-rudimentary-layout/645679/2 "2021-01-13T03:30:43Z")

</div>

> [@John\_Stern](#):
>
> `;`

add this after - flex-wrap: wrap; after text-align: center;

---

<div class="post-metadata">

**Author:** ![origslammer1](https://avatars.discourse-cdn.com/v4/letter/o/3da27b/32.png) [@origslammer1](https://forum.kirupa.com/u/origslammer1)\
**Post date:** [January 13, 2021, 3:32am UTC](https://forum.kirupa.com/t/creating-a-rudimentary-layout/645679/3 "2021-01-13T03:32:19Z")

</div>

Add - flex-wrap: wrap; after text-align:center;

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [January 13, 2021, 4:58pm UTC](https://forum.kirupa.com/t/creating-a-rudimentary-layout/645679/4 "2021-01-13T16:58:48Z")

</div>

Wow! That’s beautiful! Exactly what I wanted so thanks very much for that insight. Having said that, I haven’t got a clue as to what this property and its value is - I don’t think I have encountered it in my studies so far. But you’ve given me a great topic to look into further.
