Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 1 down vote favorite
2

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?

share|improve this question

4 Answers

up vote 7 down vote accepted

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.

share|improve this answer
wow, that is fabulous. – Lauren Ipsum Jul 11 '11 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 Jul 11 '11 at 15:16
Excellent site. +1 – dooburt Jul 11 '11 at 15:37
2  
@dooburt Sweet LEGO plane. – Farray Jul 11 '11 at 16:24
Good steer, @farray. alistapart.com has been in my bookmarks forever. It's a fantastic resource. – Alan Gilbertson♦ Jul 11 '11 at 19:07
show 1 more comment
up vote 3 down vote

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>
share|improve this answer
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 Jul 13 '11 at 11:57
Give your p tag a right margin of 350px and padding to taste. – Alan Gilbertson♦ Jul 14 '11 at 5:58
up vote 2 down vote

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>
share|improve this answer
up vote 0 down vote

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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