Layout - CSS challenges

Mitchell - Nov 6 - - Dev Community

You can find all the code in this post at the repo Github.

You can check the visual here:

Common layout via CSS

Fixed navigation layout 

<!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" />
    <title>Fixed Navigation</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <nav>This is a navbar</nav>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
nav {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

Two-columns layout 

<!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" />
    <title>Two Columns Layout</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!--
    <div class="float-container">
      <div class="left">
        <h1>Left Side</h1>
      </div>
      <div class="right">
        <h1>Right Side</h1>
      </div>
    </div>
    -->

    <!--
    <div class="absolute-container">
      <div class="left">
        <h1>Left Side</h1>
      </div>
      <div class="right">
        <h1>Right Side</h1>
      </div>
    </div>
    -->

    <!--
    <div class="bfc-container">
      <div class="left">
        <h1>Left Side</h1>
      </div>
      <div class="right">
        <h1>Right Side</h1>
      </div>
    </div>
    -->

    <!--
    <div class="flex-container">
      <div class="left">
        <h1>Left Side</h1>
      </div>
      <div class="right">
        <h1>Right Side</h1>
      </div>
    </div>
    -->

    <!--
    <div class="grid-container">
      <div class="left">
        <h1>Left Side</h1>
      </div>
      <div class="right">
        <h1>Right Side</h1>
      </div>
    </div>
    -->

    <div class="table-container">
      <div class="left">
        <h1>Left Side</h1>
      </div>
      <div class="right">
        <h1>Right Side</h1>
      </div>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
.float-container .left {
  width: 200px;
  float: left;
  background-color: tomato;
}

.float-container .right {
  margin-left: 200px;
  background-color: aqua;
}

.absolute-container {
  position: relative;
}

.absolute-container .left {
  width: 200px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: tomato;
}

.absolute-container .right {
  margin-left: 200px;
  background-color: aqua;
}

.bfc-container .left {
  width: 200px;
  float: left;
  background-color: tomato;
}

.bfc-container .right {
  overflow: hidden;
  background-color: aqua;
}

.flex-container {
  display: flex;
}

.flex-container .left {
  width: 200px;
  background-color: tomato;
}

.flex-container .right {
  flex: 1;
  background-color: aqua;
}

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr;
}

.grid-container .left {
  background-color: tomato;
}

.grid-container .right {
  background-color: aqua;
}

.table-container {
  display: table;
}

.table-container .left {
  display: table-cell;
  background-color: tomato;
}

.table-container .right {
  display: table-cell;
  background-color: aqua;
}
Enter fullscreen mode Exit fullscreen mode

Three-columns layout 

<!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" />
    <title>Three Columns Layout</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="flex-container">
      <div class="left">Left</div>
      <div class="middle">Middle</div>
      <div class="right">Right</div>
    </div>

    <div class="grid-container">
      <div class="left">Left</div>
      <div class="middle">Middle</div>
      <div class="right">Right</div>
    </div>

    <div class="absolute-container">
      <div class="left">Left</div>
      <div class="middle">Middle</div>
      <div class="right">Right</div>
    </div>

    <div class="float-container">
      <div class="left">Left</div>
      <div class="middle">Middle</div>
      <div class="right">Right</div>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
.flex-container {
  display: flex;
}

.flex-container .left {
  width: 200px;
  background-color: tomato;
}

.flex-container .middle {
  flex: 1;
  background-color: blanchedalmond;
}

.flex-container .right {
  width: 200px;
  background-color: aqua;
}

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
}

.grid-container .left {
  background-color: tomato;
}

.grid-container .middle {
  background-color: blanchedalmond;
}

.grid-container .right {
  background-color: aqua;
}

.absolute-container {
  position: relative;
}

.absolute-container .left,
.absolute-container .right {
  position: absolute;
  width: 200px;
  top: 0;
}

.absolute-container .left {
  left: 0;
  background-color: tomato;
}

.absolute-container .right {
  right: 0;
  background-color: aqua;
}

.absolute-container .middle {
  margin-left: 200px;
  margin-right: 200px;
  background-color: blanchedalmond;
}

.float-container .left {
  width: 200px;
  float: left;
  background-color: tomato;
}

.float-container .right {
  width: 200px;
  float: right;
  background-color: aqua;
}

.float-container .middle {
  margin-left: 200px;
  margin-right: 200px;
  background-color: blanchedalmond;
}
Enter fullscreen mode Exit fullscreen mode

Holy Grail 

<!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" />
    <title>Holy Grail</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>Header</header>
    <div class="columns">
      <nav>Navigation</nav>
      <main>Main</main>
      <aside>Sidebar</aside>
    </div>
    <footer>Footer</footer>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
body {
  min-height: 100vh;
}

#root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header,
nav,
main,
aside,
footer {
  text-align: center;
  padding: 12px;
}

header {
  height: 60px;
  background-color: tomato;
}

.columns {
  display: flex;
  flex-grow: 1;
}

nav {
  flex-shrink: 0;
  width: 100px;
  background-color: coral;
}

main {
  flex-grow: 1;
  background-color: moccasin;
}

aside {
  flex-shrink: 0;
  width: 100px;
  background-color: sandybrown;
}

footer {
  height: 100px;
  background-color: slategray;
}
Enter fullscreen mode Exit fullscreen mode

Reference

Image
10 Things You've Learned About Preschool, That'll Aid You In Remote Key Fob Repair
Image
10 Facts About Asbestos Claims Payouts That Insists On Putting You In An Optimistic Mood
Image
Building a Secure API for sending the Emails

tutorial, beginners, programming, javascript
Image
The Most Effective Reasons For People To Succeed At The What Is Asbestos Litigation Industry
Image
Why Is Mesothelioma Asbestosis So Popular?
Image
HEIC vs WebP
Image
Save Hours of Coding: Build Powerful Custom Hooks in React

webdev, react, programming, frontend
Image
20 Best Tweets Of All Time Concerning Key Fob Repair
Image
my 1st project on my github---
Image
HEIC vs GIF
Image
How Much to Install a Cat Flap
Image
How To Explain Mesothelioma Asbestosis To Your Grandparents
Image
Cat Flap Fitters Near Me
Image
Doors With Cat Flap
Image
Replacement UPVC Door Panels With Cat Flap
Image
Dakdekker Zwolle Zoek je een betrouwbare dakdekker in Zwolle? Bel: 085 303 8824
Image
Criando um Service Principal para acesso ao SQL Warehouses Databricks via DBeaver
Image
HEIC to PNG: Choosing the Right Format for Your Images
Image
Wheelchair Self Propelled: It's Not As Difficult As You Think
. . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player