: How to create this 3-columns fluid layout? I am trying to create a 3-columns fluid layout, as described by attached picture, but I cannot reach the desired results. Do you have some hints
I am trying to create a 3-columns fluid layout, as described by attached picture, but I cannot reach the desired results.
Do you have some hints that can help me?
More posts by @Pierce403
4 Comments
Sorted by latest first Latest Oldest Best
The 960 Grid System is great for this kind of stuff. Just copy and paste the HTML code from the generator (here) into your CSS file. Then all you have to do is call classes on your divs.
<div id="" class="">
<div id="left-side" class="grid_8">
Left side
</div>
<div id="right-side-1" class="grid_2">
Right Side 1
</div>
<div id="right-side-2" class="grid_2">
Right Side 2
</div>
</div>
The following is exactly what you need, and I think is a bit simpler than the alistapart.com construct. It doesn't use any positioning properties, so that leaves you free to do whatever you want. You'll have to throw in your own IE fixes, which would be the same as that one. I didn't have enough time available to get into that kind of fine tuning. This does work in current versions of IE, FF, Chrome, Safari and Opera, however.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #4E5869 ;
margin: 0;
padding: 0;
color: #000 ;
}
.wrapper {
background: #cccccc ;
min-width: 600 px;
margin: 0 auto;
}
.header {
background:violet;
}
.footer {
clear:both;
background: violet;
}
.mainContent {
width:100%;
min-height:600px;
background: #36C;
float: left;
margin-right: -325px;
}
.leftSidebar {
width: 200px;
background: green;
float: right;
min-height:500px;
overflow: visible;
}
.rightSidebar {
width: 125px;
background: red;
float:right;
min-height:500px;
}
</style>
<title>Untitled Document</title>
</head>
<body>
<div class="wrapper">
<div class="header"> This is header text </div>
<div class="mainContent">
<h1>Woo Hoo</h1>
Here is spiffy main content </div>
<div class="rightSidebar"> Sidebar on the right. </div>
<div class="leftSidebar"> This is my left sidebar </div>
<div class="footer"> This is my spiffy footer </div>
</div>
</body>
</html>
The 2 fixed columns with 1 fill column has been referred to as "The Holy Grail" of CSS layouts.
Check out: www.alistapart.com/articles/holygrail/
The example on that page is geared for fixed gutters and variable center column, but the concept is the same.
Try giving your fluid div a min-widthexpressed as a percentage. What that number is you'll have to work out (I threw one together and used 80%, but your mileage may vary).
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.