DEV Community

Mitchell
Mitchell

Posted on

3 1

Layout - CSS challenges

#webdev #css #beginners #learning

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

profile
Sentry
 Promoted

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

profile
Qodo
 Promoted

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

Read next

marufpfc profile image

What Can In-Browser JavaScript Do and What Are Its Limitations?

Md. Maruf Sarker -

adam profile image

🧠 Free Code Challenges, UX Trends Shaping 2025 & Duolingo's Retention Playbook

Adam Marsden -

smart_data_ profile image

Overcoming SME Challenges with Custom Deep Learning Solutions

Ashutosh -

axkira profile image

Code. Gleam. Extract fields from JSON

Kir Axanov -