While Grails really makes the MVC portion of web development easier, Cascading Style Sheets (CSS) is still really tough. I wanted a 3 Column layout with a header and footer created using CSS. This sounds easy enough, but it was more difficult than you would think. Especially if you want it to work with multiple browsers.
I spent several hours working on it, more than I would like to admit. Then I ran across Matthew James Talyor's work on 3 column liquid layouts. Matthew did a really nice job and it works exactly as you would expect. So I tried to weave it into a site I was creating. I was using Firefox and everything was going great until I tried to bring it up in Explorer. Ooops!
To make a long store short, I went back to the beginning and scrapped all my pre-existing CSS and started from Matthews. That did the trick. It rendered correctly in Firefox and Explorer both.
I was so happy figured I would probably use this layout again. So, I created a generic Grails application preconfigured to use the 3 column layout. As you would expect, all of the real work is in main.gsp and a new css file I created css file holygrail.css.
So in the spirit of hoping to make someone else's life a little easier, here are the main.gsp and holygrail.css files.
main.gsp
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title><g:layoutTitle default="www.Grails.org"/></title>
<link rel="stylesheet" href="${createLinkTo(dir: 'css',
file: 'holygrail.css')}"/>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
<meta name="description" content="The Holy Grail 3 column Liquid Layout. Pixel widths. Cross-Browser. Equal Height Columns."/>
<meta name="keywords" content="The Holy Grail 3 column Liquid Layout. Pixel widths. Cross-Browser. Equal Height Columns."/>
<meta name="robots" content="index, follow"/>
<link rel="shortcut icon" href="${createLinkTo(dir: 'images', file: 'favicon.ico')}" type="image/x-icon"/>
<g:layoutHead/>
</head>
<body>
<!--
This is a Grails example of the Holy Grail 3 column Liquid Layout work by Mathew Taylor.
For more information, please see his original work at:
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
-->
<div id="header">
<!-- Header start -->
<g:render template="/common/header"/>
<!-- Header end -->
</div>
<div class="colmask holygrail">
<div class="colmid">
<div class="colleft">
<div class="col1wrap">
<div class="col1">
<!-- Column 1 start -->
<g:layoutBody/>
<!-- Column 1 end -->
</div>
</div>
<div class="col2">
<!-- Column 2 start -->
<g:render template="/common/leftbar"/>
<!-- Column 2 end -->
</div>
<div class="col3">
<!-- Column 3 start -->
<g:render template="/common/rightbar"/>
<!-- Column 3 end -->
</div>
</div>
</div>
</div>
<div id="footer">
<!-- Footer start -->
<g:render template="/common/footer"/>
<!-- Footer end -->
</div>
</body>
</html>
holygrail.css
/* General styles */
body {
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
background:#fff;
min-width:600px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
font-size:90%;
}
a {
color:#369;
}
a:hover {
color:#fff;
background:#369;
text-decoration:none;
}
h1, h2, h3 {
margin:.8em 0 .2em 0;
padding:0;
}
p {
margin:.4em 0 .8em 0;
padding:0;
}
img {
margin:10px 0 5px;
}
/* Header styles */
#header {
clear:both;
float:left;
width:100%;
}
#header {
border-bottom:1px solid #000;
}
#header p,
#header h1,
#header h2 {
padding:.4em 15px 0 15px;
margin:0;
}
#header ul {
clear:left;
float:left;
width:100%;
list-style:none;
margin:10px 0 0 0;
padding:0;
}
#header ul li {
display:inline;
list-style:none;
margin:0;
padding:0;
}
#header ul li a {
display:block;
float:left;
margin:0 0 0 1px;
padding:3px 10px;
text-align:center;
background:#eee;
color:#000;
text-decoration:none;
position:relative;
left:15px;
line-height:1.3em;
}
#header ul li a:hover {
background:#369;
color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
#header ul li a span {
display:block;
}
/* 'widths' sub menu */
#layoutdims {
clear:both;
background:#eee;
border-top:4px solid #000;
margin:0;
padding:6px 15px !important;
text-align:right;
}
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* holy grail 3 column settings */
.holygrail {
background:#ff9; /* Right column background colour */
}
.holygrail .colmid {
float:left;
width:200%;
margin-left:-200px; /* Width of right column */
position:relative;
right:100%;
background:#fff; /* Centre column background colour */
}
.holygrail .colleft {
float:left;
width:100%;
margin-left:-50%;
position:relative;
left:400px; /* Left column width + right column width */
background:#FFD8B7; /* Left column background colour */
}
.holygrail .col1wrap {
float:left;
width:50%;
position:relative;
right:200px; /* Width of left column */
padding-bottom:1em; /* Centre column bottom padding. Leave it out if it's zero */
}
.holygrail .col1 {
margin:0 215px; /* Centre column side padding:
Left padding = left column width + centre column left padding width
Right padding = right column width + centre column right padding width */
position:relative;
left:200%;
overflow:hidden;
}
.holygrail .col2 {
float:left;
float:right; /* This overrides the float:left above */
width:170px; /* Width of left column content (left column width minus left and right padding) */
position:relative;
right:15px; /* Width of the left-had side padding on the left column */
}
.holygrail .col3 {
float:left;
float:right; /* This overrides the float:left above */
width:170px; /* Width of right column content (right column width minus left and right padding) */
margin-right:45px; /* Width of right column right-hand padding + left column left and right padding */
position:relative;
left:50%;
}
/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
text-align: center;
border-top:1px solid #000;
}
#footer p {
padding:10px;
margin:0;
}
Sunday, March 30, 2008
Holy Grail of 3 Column Layout
Subscribe to:
Post Comments (Atom)
11 comments:
Good stuff. I have fought these battles before too. These days I use YUI Grids for all this stuff (1000 different x-browser layouts in a 4k jar). They even have a GUI Builder for getting the layouts just right. Getting this stuff right is such a hassle, thanks for blogging it up.
Mee too, with YUI Grids.
Another great tool to create browser independent layout is YAML Builder from Dirk Jesse.
Dirk developed the YAML CSS- Framework and wrote an excellent book about browser independent layouts.
If you need a special layout, give it a try!
It sucks
Your blog keeps getting better and better! Your older articles are not as good as newer ones you have a lot more creativity and originality now keep it up!
haha nice I have never try to do this with code almost times I use visual studio, but I need to practice haha thanks for sharing.
Hello I enjoyed yoiur article. I think you have some good ideas and everytime i learn something new i dont think it will ever stop always new info , Thanks for all of your hard work!.
Good article!! I got a perfect sensation with this, actually I was thinking on create a blog too, it would be perfect if I take some ideas from here.
This is an interesting..... great information found here... Thanks very much!
Check more about 3 column liquid/fluid layout here
Post a Comment