1

I am trying to create a 3-columns fluid layout, as described by attached picture, but I cannot reach the desired results.

enter image description here

Do you have some hints that can help me?

Improve this question

4 Answers 4

Reset to default
7

The 2 fixed columns with 1 fill column has been referred to as "The Holy Grail" of CSS layouts.

Check out: http://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.

Improve this answer
5
  • wow, that is fabulous.
    – Lauren-Clear-Monica-Ipsum
    Commented Jul 11, 2011 at 15:10
  • 1
    It's stupidly elegant. I threw out several of my "go-to" layouts after seeing how simple his solution is...
    – Farray
    Commented Jul 11, 2011 at 15:16
  • 2
    @dooburt Sweet LEGO plane.
    – Farray
    Commented Jul 11, 2011 at 16:24
  • Good steer, @farray. alistapart.com has been in my bookmarks forever. It's a fantastic resource.
    – Alan Gilbertson
    Commented Jul 11, 2011 at 19:07
  • @Farray, thanks very much. Actually building the thing in real bricks also :)
    – dooburt
    Commented Jul 21, 2011 at 10:17
3

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>
Improve this answer
2
  • Your solution is almost perfect for my case, the only thing is that if I have a long text inside .mainContent, it goes under the sidebar columns. I am trying to find a fix.
    – Drake
    Commented Jul 13, 2011 at 11:57
  • Give your p tag a right margin of 350px and padding to taste.
    – Alan Gilbertson
    Commented Jul 14, 2011 at 5:58
2

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>
Improve this answer
0

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).

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.