Implementing Holy Grail and Double Wing Layouts with CSS
The Holy Grail layout refers to a classic webpage structure with a header, footer, and a central content area flanked by two sidebars, typically requiring the main content to be prioritized in the HTML source.
Implementation Using Float
<body>
<div class="site-header">Site Header</div>
<div class="content-wrapper">
<div class="primary-content">Primary Content</div>
<div class="sidebar-left">Left Sidebar</div>
<div class="sidebar-right">Right Sidebar</div>
</div>
<div class="site-footer">Site Footer</div>
</body>
* {
margin: 0;
padding: 0;
}
.site-header,
.site-footer {
height: 100px;
background-color: #5f9ea0;
}
.site-footer {
clear: both;
}
.content-wrapper {
padding-left: 200px;
padding-right: 200px;
min-width: 200px;
}
.content-wrapper div {
position: relative;
float: left;
height: 300px;
}
.primary-content {
background-color: #faebd7;
width: 100%;
}
.sidebar-left {
width: 200px;
margin-left: -100%;
left: -200px;
background-color: #a52a2a;
}
.sidebar-right {
width: 200px;
margin-left: -200px;
left: 200px;
background-color: #6495ed;
}
This approach releis on a combination of negative margins, relative positioning, and container padding to position the sidebars. The primary content block occupies the full width initially, and the sidebars are pulled into place using negative left margins and relative offsets.
Alternative Float Implementation
Another method involves placing the primary content element after the sidebars in the HTML. The sidebars are floated left and right respectively, allowing the primary content block to flow between them. Clearing the float on the footer remains necessary.
Double Wing Layout
<body>
<div class="site-header">Site Header</div>
<div class="content-wrapper">
<div class="primary-content">
<div class="content-inner">Primary Content</div>
</div>
<div class="sidebar-left">Left Sidebar</div>
<div class="sidebar-right">Right Sidebar</div>
</div>
<div class="site-footer">Site Footer</div>
</body>
* {
margin: 0;
padding: 0;
}
.site-header,
.site-footer {
height: 100px;
background-color: #5f9ea0;
}
.site-footer {
clear: both;
}
.content-wrapper {
min-width: 200px;
}
.content-wrapper div {
float: left;
height: 300px;
}
.primary-content {
background-color: #faebd7;
width: 100%;
}
.sidebar-left {
width: 200px;
margin-left: -100%;
background-color: #a52a2a;
}
.sidebar-right {
width: 200px;
margin-left: -200px;
background-color: #6495ed;
}
.content-inner {
padding-left: 200px;
padding-right: 200px;
}
Key Distinction
The fundamental difference lies in how space is created for the sidebars:
- In the Holy Grail layout, padding is applied to the outer container (
.content-wrapper). - The Double Wing layout achieves this by aplying left and right padding to an inner wrapper (
content-inner) nested with in the primary content block, effectively creating gutters for the floated sidebars.
