htmlcssflexboxpage-layout

How To Create This Complex Page Layout Using CSS FlexBox

I am learning (teaching myself) HTML and CSS, I came with the idea of creating the following, a little complex, page layout using only HTML and CSS FlexBox: enter image description here

Here is what I get: enter image description here

My CSS and HTML code snippet files:

/*
    I gave background-color to the left-menu and right-text 
    to show their position in the flex container.
 */

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

header {
  text-align: center;
  border: 2px solid blue;
}

#h1-title {
  font-family: 'Tangerine', serif;
  font-size: 3em;
  /*  48px    */
}

nav>#div-left {
  background-color: white;
  color: blue;
  justify-content: center;
}

nav>#div-left>a {
  text-decoration: none;
  display: block;
  padding: 0px 15px;
  margin: 10px auto;
}

nav>#div-left>a:hover {
  background-color: yellow;
  color: blue;
}

main {
  background-color: silver;
}

.row-display-flex {
  display: flex;
}

.align-items-center {
  align-items: center;
}

.container-border {
  border: 2px solid gray;
}

#vertical-menu {
  padding: 0px 20px;
  align-content: flex-start;
}

.left-menu {
  height: 300px;
  justify-content: center;
  align-items: flex-start;
}

.column-right,
.column-center {
  height: 300px;
  padding: 0px 10px;
}

#article-right>#div-right,
#article-center>#div-center {
  background-color: white;
  padding: 10px;
  width: 100;
  margin: 0 20px;
}

.width-10-p {
  width: 10%;
}

.width-37-50-p {
  width: 37.5%;
}

.width-100-p {
  width: 100%;
}

.width-50-p {
  width: 50%;
}

.height-50px {
  height: 50px;
}

.height-50-p {
  height: 50%;
}

footer {
  text-align: center;
  font-family: 'Sofia';
  font-size: 22px;
  border: 2px solid blue;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="author" content="Binyamin (Benny) Regev">
  <meta name="course" content="Web App Dev - July 2019">
  <title>M8E4-Extra</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
  <link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <header>
    <h1 id="h1-title">Making A Beautiful Page</h1>
  </header>
  <main class="row-display-flex align-items-center container-border">
    <article class="row-display-flex align-items-center width-10-p left-menu container-border">
      <nav id="vertical-menu">
        <div id="div-left">
          <a href="#">&#9776;</a>
          <a href="#">File</a>
          <a href="#">Edit</a>
          <a href="#">View</a>
          <a href="#">Tools</a>
          <a href="#">Window</a>
          <a href="#">Help</a>
        </div>
      </nav>
    </article>
    <article id="article-center" class="row-display-flex align-items-center column-center width-37-50-p container-border">
      <div id="div-center">
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
      </div>
    </article>
    <article id="article-right" class="row-display-flex align-items-center column-right width-37-50-p container-border">
      <div id="div-right">
        <!-- Row 1 Column-3 (Right), Row 1 (Top) 100% of 37.5% -->
        <div class="row-display-flex align-items-center container-border height-50-p">
          <p class="width-100-p">
            Parent: Row-1_Column-Right, First-Row (top-row)
          </p>
        </div>
        <!-- Row 1 Column-3 (Right), Row 2 (Bottom) 2 columns each 50% of parent width -->
        <div class="row-display-flex align-items-center height-50-p">
          <div class="row1-col3-row2 width-50-p container-border">
            Parent: Row-1_Column-Right, This: 2nd-Row_left-column
          </div>
          <div class="row1-col3-row2 width-50-p container-border">
            Parent: Row-1_Column-Right, This: 2nd-Row_right-column
          </div>
        </div>
      </div>
    </article>
  </main>
  <footer>
    <h3>Footer Text</h3>
  </footer>
</body>

</html>

header and footer are not a problem, took some fonts from Google©.

I created a ROW flex-container with 3 columns. The Left column I used for nav element, a vertical menu. The center column is used to display whatever text I will have to display. In the right column, I created 2 rows flexboxes: The top row's width is 100% of its parent and the bottom row is divided into 2 columns and here is my problem: I want the 2 rows to stretch to the entire area of the right column.

I would appreciate assistance in stretching the flex-items of the right column of the main row to match the page design.

Solution

  • Thank you BugsArePeopleToo for the tip but, it wasn't the solution. It was my fault that my code didn't work as I had mistakes in the CSS. Now it works as shown in the screenshot:

    enter image description here

    Here's the corrected code snippet:

    /*
    I gave background-color to the left-menu and right-text 
    to show their position in the flex container.
 */

* {
    margin: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

header {
    text-align: center;
    border: 2px solid blue;
}

#h1-title {
    font-family: 'Tangerine', serif;
    font-size: 3em;     /*  48px    */
}

nav>#div-left {
    background-color: white;
    color: blue;
    justify-content: center;
}

nav>#div-left>a {
    text-decoration: none;
    display: block;
    padding: 0px 15px;
    margin: 10px auto;
}

nav>#div-left>a:hover {
    background-color: yellow;
    color: blue;
}

main {
    background-color: silver;
}

.row-display-flex {
    display: flex;
}

.container-border {
    border: 2px solid gray;
}

#vertical-menu {
    padding: 0px 20px;
    align-content: flex-start;
}

.left-menu {
    height: 300px;
    justify-content: center;
    align-items: flex-start;
}

.column-right, .column-center {
    height: 300px;
}

.row1-col3-row {
    align-items: flex-start;
}

#article-center>#div-center, #article-right>#div-right {
    background-color: white;
    width: 100;
}

.width-10-p {
    width: 10%;
}

.width-37-50-p {
    width: 37.5%;
}

.width-100-p {
    width: 100%;
}

.height-50-p {
    height: 50%;
}

footer {
    text-align: center;
    font-family: 'Sofia';font-size: 22px;    
    border: 2px solid blue;
}
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="Binyamin (Benny) Regev">
    <meta name="course" content="Web App Dev - July 2019">
    <title>M8E4-Extra</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
    <link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <header>
        <h1 id="h1-title">Making A Beautiful Page</h1>
    </header>
    <main class="row-display-flex align-items-center container-border">
        <article class="row-display-flex align-items-center width-10-p left-menu container-border">
            <nav id="vertical-menu">
                <div id="div-left">
                    <a href="#">&#9776;</a>
                    <a href="#">File</a>
                    <a href="#">Edit</a>
                    <a href="#">View</a>
                    <a href="#">Tools</a>
                    <a href="#">Window</a>
                    <a href="#">Help</a>
                </div>
            </nav>
        </article>
        <article id="article-center"
            class="row-display-flex align-items-center column-center width-37-50-p container-border">
            <div id="div-center">
                Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
                Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
            </div>
        </article>
        <article id="article-right"
            class="row-display-flex column-right width-37-50-p container-border">
            <div id="div-right">
                <!-- Row 1 Column-3 (Right), Row 1 (Top) 100% of 37.5% -->
                <article class="row-display-flex container-border height-50-p">
                    <p class="width-100-p">
                        Parent: Row-1_Column-Right, First-Row (top-row)
                    </p>
                </article>
                <!-- Row 1 Column-3 (Right), Row 2 (Bottom) 2 columns each 50% of parent width -->
                <article class="row-display-flex row-1-col-3-row height-50-p">
                    <div class="row1-col3-row container-border">
                        Parent: Row-1_Column-Right, 
                        This: 2nd-Row_left-column
                    </div>
                    <div class="row1-col3-row container-border">
                        Parent: Row-1_Column-Right, 
                        This: 2nd-Row_right-column
                    </div>
                </article>
            </div>
        </article>
    </main>
    <footer>
        <h3>Footer Text</h3>
    </footer>
</body>

</html>