Is it possible to create a page with 3 fixed-width columns using CSS?
For instance, imagine a page with a default width of 1024px, consisting of a header, div1, div2, and div3, each with a fixed width. The layout would resemble the left side of the image when Chrome is maximized.
If the user resizes Chrome to a width of 600px or smaller, since all the elements have fixed widths, div1 should be hidden and div2 should only be partially visible. Additionally, there should be a scrollbar at the bottom.
https://i.sstatic.net/e9HRM.jpg
Here is some code I've been working on. Can you provide guidance or possibly show me an example of how to achieve this?
HTML
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
background-color: #e8eaf4;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.header{
position: absolute;
top: 0;
left: 0;
height: 60px;
width: 100%;
z-index: 25;
background-color: #fff;
border-bottom: 2px solid #daddf7;
}
.div1{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
border-top: 2px solid #daddf7;
-webkit-box-shadow: 2px 0px 4px 0px rgba(44,75,248,0.2);
box-shadow: 2px 0px 4px 0px rgba(44,75,248,0.2);
}
.div2 {
position: absolute;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.div3{
position: absolute;
right: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three Column Fixed Width Layout</title>
</head>
<body>
<div id="app">
<div class="header" style="width: 1024px; height: 60px;"></div>
<div class="div1" style="width: 200px; height: 328px; top: 60px;"></div>
<div class="div2" style="width: 700px; height: 328px; left: 180px; top: 60px;"></div>
<div class="div3" style="width: 124px; height: 328px; top: 60px;"></div>
</div>
</body>
</html>