There are four types of CSS layouts, fixed-width, fluid, elastic and hybrid.
We’re going to tackle a hybrid layout, which is a combination of the other three and in our case, a combination of fixed-width and fluid.
Before we start, if you’d like to take a peek at the end-result, click here!
Some of you will understand the technique just by looking at the code, but those who don’t understand the logic behind this layout, then don’t jump to copy/pasting! Let’s go through the code line by line first and see what each one does and overall, what makes this technique tick.
Our layout is going to have a header, a menu, two columns and a footer, a pretty simple structure but a great starting point! What makes our layout hybrid is the left column which will have a fixed-width and the rest of the layout will be fluid and stretch along with the screen’s resolution.
To get started, we’re going to create the HTML structure using DIVs, obviously
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Two-Column CSS Hybrid Layout</title>
</head>
<body>
<div id="layout">
<div class="header">
</div>
<div class="content">
<div class="left">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</div>
<div class="right">
<p>Proin scelerisque est ipsum. Donec id nibh nec erat accumsan semper at at lacus. Donec eget est arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla bibendum erat et elit euismod sed convallis mi condimentum. In dictum leo sed purus faucibus dignissim. Duis at magna eget purus laoreet vehicula. Donec suscipit blandit tincidunt.</p>
<p>Ut eleifend, neque sit amet sagittis eleifend, sapien magna porta nibh, eu tincidunt felis odio in nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed interdum vulputate posuere. Maecenas non lectus eu odio sagittis vulputate eget et lectus.</p>
<p>In ornare lacus eu neque consectetur interdum. Cras porta, lacus at iaculis tempus, sem dolor fringilla leo, eu vestibulum ipsum elit in lectus. Nulla volutpat, tellus non porttitor posuere, urna leo suscipit ante, a tincidunt velit tortor sit amet lorem. Vivamus in turpis quam, sed fringilla velit. Phasellus dictum blandit urna id imperdiet. </p>
</div>
<div class="clear"></div>
</div>
<div class="footer"><p>Footer text here</p>
</div>
</div>
</body>
</html>
|
Looks awful without the CSS haha, but that’s what we’re going to work on.
We’ll start with some basic styling and the main DIV “#layout”, the one that wraps the rest of the structure:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
body {
background-color: #eee8da;
color: #444;
padding: 0;
margin: 0;
}
#layout {
max-width: 1600px;
min-width: 750px;
padding: 20px;
}
|
I’ll give each section a different background color so you can distinguish the spacing.
The main DIV is now entirely fluid, we’ve given it a minimum width of 750px so it will fit well into 800×600 resolutions and a max-width of 1600px and I personally believe we don’t need more than that these days, unless you read this article 10-20 years from now and 100 inches monitors are used on a daily basis, if that’s the case, just tweak the max-width accordingly. Though keep in mind that excessive wide layouts will make text difficult to read, since the text lines will be too long to follow.
Now our layout is ready for internal structuring, let’s style the header:
1
2
3
4
5
6
7
|
.header {
background-color: #4f2000;
height: 100px;
width: 100%;
}
|
That easy to add the header, giving it a fixed height we want and the width 100% so it will stretch within our fluid main DIV.
Time to style a fixed-width left column and a fluid right column, both sitting in a “.content” div:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.content {
background-color: #fff;
height: 100%;
width: 100%;
}
.left {
float: left;
width: 150px;
}
.right {
background-color: #e4ddcc;
margin: 0 0 0 170px;
}
|
I think most of the code above is self-explanatory, we created a div to hold both of our columns, we floated our left column to the left inevitably stacking our right column in it, so we gave it a left margin of 170px so they won’t overlap.
To put the footer back on track, we added a div with a clear style so it won’t be affected by the above floated elements.
1
2
3
4
5
6
7
8
9
|
.clear {
clear: both;
}
.footer {
background-color: #fff;
height: 30px;
}
|
There you have it, a stable hybrid css layout with a fixed-width left column.
Finished code
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
body {
background-color: #eee8da;
color: #444;
padding: 0;
margin: 0;
}
#layout {
max-width: 1600px;
min-width: 750px;
padding: 20px;
}
.header {
background-color: #4f2000;
height: 100px;
width: 100%;
}
.content {
background-color: #fff;
height: 100%;
width: 100%;
}
.left {
float: left;
width: 150px;
}
.right {
background-color: #e4ddcc;
margin: 0 0 0 170px;
}
.clear {
clear: both;
}
.footer {
background-color: #fff;
height: 30px;
}
|
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Two-Column CSS Hybrid Layout</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="layout">
<div class="header">
</div>
<div class="content">
<div class="left">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</div>
<div class="right">
<p>Proin scelerisque est ipsum. Donec id nibh nec erat accumsan semper at at lacus. Donec eget est arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla bibendum erat et elit euismod sed convallis mi condimentum. In dictum leo sed purus faucibus dignissim. Duis at magna eget purus laoreet vehicula. Donec suscipit blandit tincidunt.</p>
<p>Ut eleifend, neque sit amet sagittis eleifend, sapien magna porta nibh, eu tincidunt felis odio in nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed interdum vulputate posuere. Maecenas non lectus eu odio sagittis vulputate eget et lectus.</p>
<p>In ornare lacus eu neque consectetur interdum. Cras porta, lacus at iaculis tempus, sem dolor fringilla leo, eu vestibulum ipsum elit in lectus. Nulla volutpat, tellus non porttitor posuere, urna leo suscipit ante, a tincidunt velit tortor sit amet lorem. Vivamus in turpis quam, sed fringilla velit. Phasellus dictum blandit urna id imperdiet. </p>
</div>
<div class="clear"></div>
</div>
<div class="footer"><p>Footer text here</p>
</div>
</div>
</body>
</html>
|
Bear in mind that older browsers like IE6 do not recognize the max-width CSS style so it will stretch to the screen’s resolution width regardless of its size.
2 thoughts on “Two-Column Hybrid CSS Layout”