Flexbox 2 Column Fixed Header

When to Use Flexbox

Sample Image Use flexbox to build your web page structure. Then use conventional CSS in child containers for text flow and image alignment.

You can use text-align and the float property inside child containers in flexbox.

Structure

Flexbox used as a tool makes building web page structure with multiple columns much easier.

You should not be using the float property for aligning divisions to create page structure.

About the Borders

I've placed the borders to help you see the effect of using gap and padding.

Clamp It

Learn to use the clamp function to preset font-size, line-height, padding and margins, instead of using media queries. If you are serious about a career in web development, the clamp function is one of the essentials you need to spend time learning.

Start Out Ahead!!

Navigation

Your navigation device would be placed in the header in this design, so that it would always be visible.


<!DOCTYPE html>
<html lang="en">
<head>
<title>Flexbox 3 Columns with Sidebars</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
margin:0;
padding : 0;
box-sizing: border-box;
}

body {
max-width: 100dvw; /*100% of viewport*/
min-height: 100dvh;
margin: 0 auto;  /* center containers */
background-color: whitesmoke;
font-family: arial , serif;
}

header {
display: flex;
flex-wrap : wrap;
height : clamp(6rem , 6rem + 1dvw  , 7rem);
padding: clamp(1rem , 1dvw + 1rem   , 3rem) 5dvw;
width: 100dvw;
background-color: #000;
position: fixed;
top: 0;
left: 0;

}

.hdr-left { 
flex:1;
padding: 0; margin: 0;
}

nav {
flex: 4;
padding: 0; margin: 0;
align-items: flex-start;
}

 div.offset { /* Spacing to force content below fixed header */
display: flex;
height : clamp(6rem , 6rem + 1dvw  , 7rem);
padding: clamp(1rem , 1dvw + 1rem   , 3rem) 0;
margin-bottom: clamp(2rem , 5dvw , 4rem);
}

div.main {
  display: flex; /*alert browser - this is flexbox */
  justify-content: center; /* center columns */
  flex-wrap: wrap;  /* wrap contents when necessary */
  gap : clamp(2rem , 5dvw , 4rem); /* adjusts spacing between 32px and 64px*/
  border : solid 1px #ff0000
}

.left {
flex: 3; /*Increase width*/
padding: 1dvw 2dvw;
border : solid 1px
}

.right {
flex: 1;
padding: 1dvw 2dvw;
border: solid 1px;
background-color: whitesmoke
}

footer { 
display: flex;
justify-content: center;
height : clamp(5rem , 5rem + 1dvw  , 7rem);
padding: 1dvw 5dvw;
margin-top: clamp(2rem , 5dvw , 4rem);
background-color: #000;
}

.hdr-left p , footer p {
color : whitesmoke;
font-size: clamp(1.5rem , 1dvw + 1rem , 1.75rem);
text-indent 0;
padding : 0 0
}

.left p , .right p { 
  font-size : clamp( 1.125rem , 1.125rem + .5dvw , 1.375rem); 
  line-height :  : clamp(1.35rem , 1.35rem + .5dvw , 1.65rem);
}

nav p {
font-size: 1.125rem;
color: #fff;
padding: 0;
margin: 0;
}

nav a {
color: #fff;
text-decoration : none;}
nav a:hover {
color:red;
}

h1  {
   font-size: clamp(1.5rem , 1.5rem + .5dvw , 2rem) ; /* Adjusts from 24px to 32px */
	line-height: clamp(1.8rem , 1.8rem + .5dvw , 2.4rem); /* 1.2 to 1.5 times size of text */
	color: dodgerblue;
   text-align :center;
	text-shadow : 1px 1px 2px #000
}

h2 {
   font-size: clamp(1.25rem , 1.25rem + .5dvw , 1.75rem) ; /* Adjusts from 20px to 28px */
	line-height: clamp(1.5rem , 1.5rem + .5dvw , 2.1rem); /* 1.2 to 1.5 times size of text */
	color: dodgerblue;
   text-align :center;
	text-shadow : 1px 1px 2px #000
}

.left p , .right p { 
  font-size : clamp( 1.125rem , 1.125rem + .25dvw , 1.375rem ); /* Adjusts between 18px and 22px */
  line-height: clamp(1.35rem , 1.35rem + .25dvw , 1.625rem); /* 1.2 to 1.5 times size of text */
  text-indent: 1.25rem;
   margin : clamp(.5rem , .5rem + .25dvw , 1rem ) 0 ;
  text-align: left;
}

.left p a {
color: dodgerblue;
text-decoration : none;
}

.left p a:hover {
color: red;
}

img.l-img {
  max-width : 100%;
  float: left;
  margin : clamp(.5rem , 1dvw , .625rem); 
  box-shadow : 1px 1px 6px #000;
}




@media (max-width: 52rem) { /*832px*/
 div.left ,  div.right , .hdr-left , nav {
flex: 100%;
}
 .hdr-left p {
text-align: center
}
}
</style>
</head>
<body>
<header>
<div class="hdr-left">
<p>Header</p>
</div>
<nav>
<p><a href="#">Products</a>&emsp;<a href="#">Pricing</a>&emsp;<a href="#">Services</a></p>
</nav>
</header>
<div class="offset">
<p>&nbsp;</p>
</div>
<div class="main">
<div class="left">
<h1>Flexbox 2 Column Fixed Header</h1>
<h2>When to Use Flexbox</h2>
<p><img class="l-img" src="images/pugs100.avif" alt="Sample Image" title="Good morning Pugsley" onerror="this.src='images/pugs100.jpg'">Use flexbox to build your web page structure. Then use conventional CSS in child containers for text flow and image alignment.</p>
<p>You can use text-align and the <a href="float-property.html">float property</a> inside child containers in flexbox.</p>
<h2>Structure</h2>
<p>Flexbox used as a tool makes building web page structure with multiple columns much easier.</p>
<p>You should not be using the float property for aligning divisions to create page structure.</p>
<h2>About the Borders</h2>
<p>I've placed the borders to help you see the effect of using gap and padding.</p>
<h2>Clamp It</h2>
<p>Learn to use the <a href="clamp.html">clamp function</a> to preset font-size, line-height, padding and margins, instead of using media queries. If you are serious about a career in web development, the clamp function is one of the essentials you need to spend time learning.</p>
<p><b>Start Out Ahead!!</b></p>
</div>
<div class="right">
<h2>Navigation</h2>
<p>Your navigation device would be placed in the header in this design, so that it would always be visible.</p>
</div>
</div>
<footer>
<p>Footer</p>
</footer>
</body>
</html>