Tips for Developing Semi-Liquid Layouts

Tips for Developing Semi-Liquid Layouts

Tips for Developing Semi-Liquid Layouts

 

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

Tips for Developing Semi-Liquid Layouts

Tips for Developing Semi-Liquid Layouts

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

Tips for Developing Semi-Liquid Layouts

Tips for Developing Semi-Liquid Layouts

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>
	<li>
		<div><!--Content--></div>
	</li>
	<li>
		<div><!--Content--></div>
	</li>
	<li>
		<div><!--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.

Tips for Developing Semi-Liquid Layouts

Tips for Developing Semi-Liquid Layouts

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!

 

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>