1. Drop Shadows on Layout
Typically most people use a 1px height image of the layout drop shadow, and repeat vertically to stretch to the bottom. When working with semi-liquid layouts, this technique needs to be modified a tad bit. Here is a work-around to achieve this effect on a semi-liquid layout.
HTML
We achieve this effect by layering the left drop shadow with the right drop shadow. We can nest two div’s and allow them to overlap each other.
CSS
#content_wrap {
background: #fff url('/body_shadow_L.gif') repeat-y left top; /*--Left drop shadow--*/
margin: 0 auto;
padding: 0;
min-width: 780px; /*--Minimum Width--*/
max-width: 1200px; /*--Maximum Width--*/
}
.content {
background: url('/body_shadow_R.gif') repeat-y right top; /*--Right drop shadow--*/
margin: 0;
padding: 25px 40px; /*--Padding inside of the main content--*/
overflow: hidden;
font-size: 1.2em;
}
What about IE6?
As for myself, I am starting to neglect IE6 users more and more, so to make it easy on myself I usually just use the *html hack for IE6 and have the #content_wrap as a fixed width.
2. Flexible Banners
One simple technique that works like a charm is the flexible banner technique. We will first design the banner based on our minimum width. For the remaining space, we will fill it with a repeating background image.
HTML
CSS
.banner_wrap {
width: 100%;
background: url('/banner_stretch.gif') repeat-x;
display: block;
text-align: center;
}
If you would like to take this a step further, you can get very creative with the CSS Parallax effect.
3. % Based Columns
I’ve discussed this tip before on a couple of my previous tutorials, but its something that I am starting to use more often. When working with liquid type layouts, its always tough to mix % with a fixed px based width. What we need to do is separate the two like this:
HTML
CSS
ul.col3 {
width: 100%;
margin: 10px 0;
padding: 0;
list-style: none;
overflow: hidden;
}
ul.col3 li {
float: left;
width: 33.3%;
padding: 0;
margin: 0;
}
.block {
margin-right: 10px;
padding: 20px;
background: #f0f0f0;
}
Extra Space?
We would end up with an extra 10px on the last column, but we can fix this with some simple jQuery.
jQuery
//Get rid of last margin
$("ul.col3").find("li .block:last").css("margin-right", "0");
*Note - Chris Coyier recently spoke on this topic and came up with a solution with pure css.
*Note - Achieving equal height on these semi-liquid columns may become an issue as well, here is a nice tutorial by CSS Newbie on the topic. Do check it out!
4. Fixed + Liquid Based Columns
This trick usually throws people off, but its actually not that difficult once you understand the logic of it. Please refer to my previous article “Liquid + Fixed Two Column Lists with CSS” for more details.
Conclusion
As you can see, most of these techniques revolve around the flexibility of your design. Although designing for semi-liquid layouts can be a hassle, it may be a huge benefit for your visitors. Semi-liquid layouts are not recommended for every site out there, so do look into the pros and cons and execute them accordingly. If you have any other tricks and tips, please don’t hesitate to share!
Resource: sohtanaka
