HTML structure - FLEX

CSS FLEX https://www.w3schools.com/css/css_templates.asp

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<div class="container">

  <div id="content">

    <div class="header">
      <h1>Header</h1>
    </div>

    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/news">News</a></li>
        <li><a href="/contact">Contact</a></li>
        <li><a href="/about">About</a></li>
        <li class="search"><input type="text" name="search" placeholder="Search"></li>
      </ul>
    </nav>

    <div class="row">
      <div id="left" class="column">Left Column</div>
      <article id="center" class="column">
      
          <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>

  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining...

CSS

html,
body {
  background: #F9F9F9;
  color: #454545;
}

#content {
  background: #FFFFFF;
  padding: 20px 30px;
  border: 1px solid #CCCCCC;
  box-shadow: 1px 1px 1px #454545;
}

.container {
  margin-top: 5%;
  padding: 5%;
}

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  padding: 0px 0px 0px 30px;
  text-align: left;
}

#aside,
#left {
  background: #F9F9F9;
  border: 1px solid #CCCCCC;
  width: auto;
  max-width: 25%;
  min-width: 5%;
}

#center {
  background: #F9F9F9;
  border: 1px solid #CCCCCC;
  max-width: 50%;
  min-width: 25%;
  width: auto;
}

nav {
  background: #F9F9F9;
  border: 1px solid #CCCCCC;
  margin: 10px 0px 10px 0px;
  padding: 0px 10px 0px 10px;
}

nav ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

nav ul li {
  margin: 0px;
  padding: 0px;
  display: inline-block;
}

nav ul li a {
  margin: 0px;
  padding: 0px;
  text-decoration: none;
  color: #454545;
}

nav ul li input {
  padding: 0px;
  width: 75px;
  height: 20px !important;
}

nav ul li.search {
  float: right;
  height: 20px;
  margin: -1px -11px 0px 0px;
}

nav ul li.search input {
  border-radius: 0px;
  height: 26px !important;
}

/* Container for flexboxes */
.row {
  display: -webkit-flex;
  display: flex;
}

/* Create three equal columns that sits next to each other */
.column {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 10px;
}

/* Style the footer */
.footer {
  background-color: #F9F9F9;
  border: 1px solid #CCCCCC;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
  text-align: center;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .row {
    -webkit-flex-direction: column;
    flex-direction: column;
  }

  .column {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 5px 0px;
  }
}