Tutorials

Tips for Developing Semi-Liquid Layouts

Tags: Beginner

As we’ve discussed before on my previous article, “How much longer will we design for 1024?” semi-liquid layouts may possibly start to become more popular in the near future. As screen resolutions get both smaller (mobile) and bigger (larger monitors), having some knowledge on adapting to semi-liquid layouts will most definitely be a plus in your arsenal.

Here are few tricks that I use when it comes to working with semi-liquid layouts. If you have some of your own that you would like to share, I would love to learn about it!

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.

<div id="content_wrap">
	<div class="content">
	<!--Content-->
	</div>
</div>

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

<div class="banner_wrap"><img src="banner.gif" alt="Banner Title" /></div>

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

<ul class="col3">
	<li>
		<div class="block"><!--Content--></div>
	</li>
	<li>
		<div class="block"><!--Content--></div>
	</li>
	<li>
		<div class="block"><!--Content--></div>
	</li>
</ul>

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. Check it out over at SmashingMagazine.com

*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!