My goal is to create a layout with the following features, as shown in the screenshot:
The main features include:
- The screen is divided into 3 regions (columns);
- The left and right columns have fixed widths;
- The middle column expands based on the browser width;
- The right column is subdivided into two regions;
- The bottom region has a fixed size and is always at the bottom;
- The top region expands according to the browser height.
It took me about 2 hours to generate the above screenshot using HTML tables with these features.
Despite spending two days working with CSS, I haven't been able to achieve the desired layout. My attempt at CSS and the associated screenshots are provided below:
<html>
<head>
<title>My Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body{
height:100%;
background:beige;
}
#header {
width:100%;
height:60px;
text-align:center;
background:#A7C942;
color:#fff;
float:left;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:2em;
}
#leftDiv {
float:left;
width:150px;
height:90%;
background:aquamarine;
}
#midDiv {
float:left;
width:auto;
height:90%;
background:lightsalmon;
display:block;
}
#rightDiv {
float:right;
width:365px;
height:90%;
background:green;
display:block;
}
#topRow {
background-color:lightgoldenrodyellow;
}
#bottomRow {
background-color:lightpink;
height:200px;
}
</style>
</head>
<body>
<div id="body">
<div id="main">
<div id="header">my header</div>
<div id="leftDiv">
<p>LEFT</p>
</div>
<div id="midDiv">
<p>MIDDLE</p>
</div>
<div id="rightDiv">
<p>RIGHT</p>
<div id="topRow">
TOP
</div>
<div id="bottomRow">
BOTTOM
</div>
</div>
</div>
</div>
</body>
</html>
Here is the screenshot with CSS:
The issues with my CSS attempt are:
- The middle column does not expand properly (salmon colored part);
- There's an unexpected appearance of white space instead;
- I can't make the pink region stay at the bottom constantly;
- I struggle to make the yellow region stretch vertically;
- There is unwanted wrapping where the right region goes under the left and middle regions.
At this point, if I don't get a working solution using CSS soon, I might resort back to using tables. Unless a CSS expert comes to rescue me with a solution:-)
Update As of now, there were four great answers provided. I tested all of them on Firefox and Chrome, and each one works well. However, I must choose just one as the accepted answer. I'll go with the simplest one that uses only CSS and absolute positioning (no flexbox or CSS tables).
Big thanks to @matthewelsom, @Pangloss, @Shrinivas, and @Paulie_D for their helpful answers. Anyone who comes across their solutions will surely find them useful for their own projects. Everyone gets upvotes, and your efforts are truly appreciated!