We've published a couple of articles on sliders in the past. We first had a tutorial on building a XML powered slider, then we released the source codes and demo for the xml slider and we finally released the latest revision as the xml slider plugin. Today we're going back to basics, as I am going to show you how to make a rather simple, lightweight slider in no time. Here's a demo of what we're building today.

HTML structure

This structure will retain and contain the actual thumbs which will be displayed as the slider's content. As you'll probably figure out, I am using the 960gs to keep the structural integrity as simple as possible.

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="wrapper" class="container_12">
 
	<div id="featured-wrapper" class="grid_12 all-rounded">
		<div class="arrowleft">&nbsp;</div>
		<div id="featured-thumb" class="grid_12 alpha omega all-rounded">	
			<ul id="featured-thumb-list">
 
			</ul>	
		</div>
		<div class="arrowright">&nbsp;</div>
		<div class="clear">&nbsp;</div>
	</div>
</div>

The wrapper is used to hold the entire contents of the page in the center of it. featured-wrapper will hold the next, previous arrows as well as the featured-thumb div that wraps the thumbnail list. featured-thumb will have overflow set to hidden so that only a couple of thumbs are shown at a time. The unordered list will be shifting left to right when users click the arrows to reveal other caricatures. Before we get there, here's the code that is used to display the thumbs. The following piece of code will be repeated inside the unordered list depending on how many thumbs we want to display.

1
2
3
4
5
6

<li class="grid_2">
	<a href="#" class="all-rounded">
		<img src="thumb_featured.png" width="120" height="150" alt="caption title" class="all-rounded" />
		caption title
	</a>
</li>

Styling the slider with a sprinkle of css

1
2
3
4
5
6
7

#featured-wrapper { padding:0px; margin-top:35px; margin-bottom:35px; height:207px; }
#featured-wrapper .arrowleft { position:absolute; display:block; width:49px; height:61px; float:left; margin-left:-25px; margin-top:55px; z-index:100; background:url('arrow_left.png') no-repeat; }
#featured-wrapper .arrowright { position:relative; display:block; width:49px; height:61px; float:right; margin-right:-27px; margin-top:55px; z-index:100; background:url('arrow_right.png') no-repeat; }
#featured-thumb	{ position:absolute; background-color:#FFF; border:1px solid #CCC; text-align:center; z-index:50; padding:15px 0px; overflow:hidden; }
#featured-thumb-list { width:20000px; float:left; margin:0px; padding:0px; }
#featured-thumb-list li a { text-decoration:none; }
#featured-thumb-list li img { background-color:#F1F1F1; border:1px solid #CCC; margin-bottom:10px; }

I left out the code for the grid system. What this piece of css does is it sets the width and heigh of the div that wraps the slider controls and content, it positions the arrows and displays their background images (I used background images for the arrow design). It also sets the structure and overflow of the featured-thumb div that wraps the list of thumbnails. Finally, it applies some basic styles to the thumbnail placeholder and the links used for each thumbnail.

jQuery functionality

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

function featured_thumb(maxwidth)
{	// featured thumb functionality
	if((typeof maxwidth=='undefined')||(maxwidth==null)){maxwidth=900;}
	$('.arrowright').live('click',function(){
		if ( Math.round(parseFloat($("#featured-thumb-list").css("margin-left"),10))<=-maxwidth)
		{
			$('#featured-thumb-list').stop();
			$('#featured-thumb-list').animate({
			    'margin-left': '-'+maxwidth
			  }, 500, function() {
			    // Animation complete.
			  });
		}
		else
		{
			$('#featured-thumb-list').stop();
			$('#featured-thumb-list').animate({
			    'margin-left': '-=160'
			  }, 500, function() {
			    // Animation complete.
			  });	
		}
	});
	$('.arrowleft').live('click',function(){
		if ( Math.round(parseFloat($("#featured-thumb-list").css("margin-left"),10))>=0)
		{
			$('#featured-thumb-list').stop();
			$('#featured-thumb-list').animate({
			    'margin-left': '0'
			  }, 500, function() {
			    // Animation complete.
			  });
		}
		else
		{
			$('#featured-thumb-list').stop();
			$('#featured-thumb-list').animate({
			    'margin-left': '+=160'
			  }, 500, function() {
			    // Animation complete.
			  });	
		}
	});
	// end featured thumb functionality
}
 
jQuery(document).ready(function($)
{
	featured_thumb(850);
});

In the above javascript snippet we define a function which adds the required functionality to the slider. Its sole parameter is the maxwidth variable, which is the maximum width of the margin-left property which is modified to move the thumbnail inside the placeholder. So if the placeholder is 800 px in width and the maxwidth variable set to 850, the thumbs will move around in a 1650 box. There are two onclick events (lines 4 and 24) which basically trigger the same functionality that is applied in opposite directions (left and right). To move left, we add pixels to left margin. To move right, we subtract from the left margin.

Because the margin-left attribute is defined as X px;, where X is a number, we parse this value into a float (to allow negative values also), then we round the number (to prevent anything bad going on) and compare the value with 0 or maxwidth depending on the direction we're headed to. If we're going left and by clicking the left arrow the margin would become greater than 0, we have reached the end of the slider and we therefor stop the animation from sliding the content even further. If you try many repeated clicks you'll this code will even perform an effect similar to a bouncing effect. Similarly, if moving the content to the right, the margin is compared to negative maxwidth (<=-maxwidth). If we reach this threshold, once again we're at the end of the thumbnails box and the animation needs to be stopped to prevent moving the thumbnails further.

To conclude, I guess that in order to reduce the size of the code one can write an extra function for the onclick behavior and call it when needed instead of copy pasting it into each of the events and doing the minor customization I've done.

1. How can I keep Passenger Standalone up even after a server restart?
2. How do I run health checks on Passenger Standalone?
3. How do I automatically restart and spawn a rails app if it crashes under Passenger Standalone?

There are a number of fixes for the above issues, but there isn't a simple one to fix all in one. Or at least I haven't come across any of them. One fix for the first problem was placing a script in /etc/init so that passenger would start when the server is rebooted. This however didn't fix the other two issues as it would only start Passenger when the entire server would start, meaning Passenger wouldn't be started if for example the server ran out of memory, something crashed the rails apps etc.

The best fix I could think of was creating a script that checks whether Passenger standalone is running every minute and if it isn't, then start it. This fix would work for all scenarios: server reboot, application crash. Moreover, as the script would run as a cronjob every minute, it would also perform a health check on all running apps. Here's the code for the script.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

#!/bin/bash
 
/usr/sbin/lsof -i :13007 > /home/{USER}/rails_apps/{APP1}test
 
if [ ! -s /home/{USER}/rails_apps/{APP1}test ];
  then
    # passenger down
    date
    . "/usr/local/rvm/scripts/rvm"
    rvm use 1.9.2
    cd /home/{USER}/rails_apps/{APP1}/
    passenger start -a 127.0.0.1 -p 13007 -d -e production --user {USER}
fi
 
/usr/sbin/lsof -i :13008 > /home/{USER}/rails_apps/{APP2}test
 
if [ ! -s /home/{USER}/rails_apps/{APP2}test ];
  then
    # passenger down
    date
    . "/usr/local/rvm/scripts/rvm"
    rvm use 1.9.2
    cd /home/{USER}/rails_apps/{APP2}/
    passenger start -a 127.0.0.1 -p 13008 -d -e production --user {USER}
fi

The above example is for a server running two apps on Passenger Standalone behind apache on ports 13007 and 13008. Replace {USER} , {APP1}, {APP2} with your own configuration. Once you've written your file, save it to /home/{USER}/rails_apps/health_check.sh and then add a cronjob to run it every minute, 5 minutes or whenever you want.

The code above checks whether there are any processes listening on the ports defined for each app. If there is a single process, the output will be written to a file which will have a file size greater than 0. If there are no processes listening on that port, the file size will be 0. The next step is to check the file size. If it is 0, our app is not running and we can start it. Simple as that. And it works for reboots, crashes, integrity and health checks and more.

If you're wondering what's with the date command, here's the answer. In my cronjob I've set the output of the command to /home/{USER}/rails_apps/health_check.log. If any app is started (meaning it was down for some reason) I will have the info and the timestamp in the log. I can then look throughout the apache / nginx / rails logs at that specific timestamp and identify the problem that caused the app to crash, if there were any bugs.

I have seen a lot of web development companies, or for that matter, companies that offer IT services having a dull client list page. They usually reside to a logo showcase or a text list divided into multiple columns. This later design is what we will try to achieve in this tutorial, but we will also add a service list, and map the two lists together. Pointing to a service will reveal clients that bought that service while pointing to a client will reveal services bought by that client. We will use jQuery to map the two together.

The HTML

I will be using HTML 5 tags for this tutorial, which means what we are building here will only work on modern browsers. However, it's just a few tags and a doctype that need to be changed to make it work on every browser. The structure of the file will be consisted of two HTML 5 tags: header and section. Enough talk, here's the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<header class="top-rounded">
	<!-- this is the horizontal bar with the gradient-->
	<h1>Services</h1>
	<h2>Clients</h2>
</header>
<section>
	<ul class="services btlft-rounded">
		<!-- this is the section that will hold the services-->
		<li>Systems Development
			<ul>
				<li class="ubn"><a href="#" class="">Business Needs</a></li>
				<li class="dd"><a href="#" class="">Design &amp; Development</a></li>
				<li class="ti"><a href="#" class="">Test &amp; Implement</a></li>
			</ul>
		</li>
		<li>Design &amp; Branding
			<ul>
				<li class="mr"><a href="#" class="">Market Research</a></li>
				<li class="bs"><a href="#" class="">Business Strategy</a></li>
				<li class="ci"><a href="#" class="">Corporate Identity</a></li>
				<li class="obp"><a href="#" class="">Online Brand Presence</a></li>
				<li class="ue"><a href="#" class="">User Experience</a></li>
				<li class="ia"><a href="#" class="">Information Architecture</a></li>
				<li class="ad"><a href="#" class="">Application Development</a></li>
			</ul>
		</li>
	</ul>
	<ul class="clients btrght-rounded">
		<!-- this is the section that will hold all clients -->
		<li class="dd ti"><a href="#" class="">Nike</a></li>
		<li class="ubn di ti"><a href="#" class="">Adidas</a></li>
		<li class="dd"><a href="#" class="">Hugo Boss</a></li>
		<li class="ci ad"><a href="#" class="">Canal +</a></li>
		<li class="mr bs ci obp"><a href="#" class="">TV shop plus</a></li>
		<li class="ad"><a href="#" class="">CBS</a></li>
		<li class="ia"><a href="#" class="">NBC</a></li>
		<li class="mr bs ci ue ia ad"><a href="#" class="">GOL TV</a></li>
		<li class="ia ad"><a href="#" class="">Petrom</a></li>
		<li class="ue ia ad"><a href="#" class="">OMV</a></li>
		<li class="ci obp"><a href="#" class="">La pizza</a></li>
		<li class="mr"><a href="#" class="">The shop</a></li>
	</ul>
</section>

As you see in the code above, each list item has a various number of classes. These classes are used to identify services and to map services to clients and viceversa. The class attribute in the anchor tags is used to emphasize which clients or services are selected. With that said it is time to move on to some basic styling.

The CSS

I will use some rounded corners instructions, but apart from that everything else is pretty simple. Here's the CSS code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

/* reset basic styling and set rounded corners */
*
{ margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:inherit; }
.all-rounded,
ul.services li a,
ul.clients li a			
{ border-radius:9px; -moz-border-radius:9px; -webkit-border-radius: 9px; }
.btlft-rounded			
{ border-bottom-left-radius:9px; -moz-border-radius-bottomleft:9px; -webkit-border-bottom-left-radius:9px; }
.btrght-rounded			
{ border-bottom-right-radius:9px; -moz-border-radius-bottomright:9px; -webkit-border-bottom-right-radius:9px; }
.top-rounded			
{ border-top-left-radius:9px; -moz-border-radius-topleft:9px; -webkit-border-top-left-radius:9px; 
border-top-right-radius:9px; -moz-border-radius-topright:9px; -webkit-border-top-right-radius:9px; }
 
/* styling of the general structure: size, position and alike */
header
{ display:block; width:801px; height:40px; margin:0px auto; margin-top:100px; border:1px solid #888;  border-bottom:none; }
header h1, header h2
{ display:block; margin:0px; padding:0px; }
header h1
{ width:200px; float:left; }
section	
{ display:block; width:803px; margin:0px auto; margin-bottom:50px; overflow:auto; }
ul
{ display:block; float:left; list-style:none; padding-bottom:15px; }
ul.services
{ width:200px; }
ul.clients
{ width:600px; }
 
/* visual styling: colors, font size etc */
header
{ background:#999 url('../images/top.png') repeat-x; }
header h1, header h2
{ font-size:20px; color:#F6F6F6; line-height:40px; text-align:center; }
ul.services
{ background-color:#999; border:1px solid #888; border-right:none; }
ul.clients
{ background-color:#F0F0F0; border:1px solid #888; }
 
ul.services a, ul.clients a
{ text-decoration:none; }
ul.services li a		
{ display:block; color:#F0F0F0; height:23px; line-height:25px; padding:0px 5px; border:1px solid #999; }
ul.services li a:hover
{ color:#222222; line-height:25px; padding:0px 5px; border:1px solid #222222; background:#999 url('../images/hover_services.png'); }
ul.services li ul		
{ margin-left:20px; }
ul.services li			
{ overflow:hidden; }
 
ul.clients li a			
{ display:block; float:left; width:138px; padding:0px 5px; line-height:25px; height:23px; text-align:center; border:1px solid #F0F0F0; }
ul.clients li a:hover
{ color:#222222; line-height:25px; padding:0px 5px; border:1px solid #222222; background:#999 url('../images/hover_services.png'); }
 
ul.services li a.selected,
ul.clients li a.selected
{ color:#222222; line-height:25px; padding:0px 5px; border:1px solid #222222; background:#999 url('../images/hover_services.png'); }

And here is a demo of how what we coded looks like. Being done with HTML and CSS, we move forward to jQuery coding to map services and clients together.

The jQuery

As you've seen in the demo the two columns do not share the same height. If you have many services and few clients, or few services and lots of clients, it is very likely that the two columns will not be of equal height. We can easily fix that with the following jQuery code:

1
2
3
4
5
6

// resize column for same height
var servicesHeight = $('.services').height(); // get height of services ul
var clientsHeight = $('.clients').height(); // get height of clients ul
// check who's bigger and set height accordingly
if(servicesHeight>clientsHeight) $('.clients').height(servicesHeight); 
   else $('.services').height(clientsHeight);

You can view a demo with the equal height columns problem solved. Next piece of code is the one creating the behavior necessary when clicking on services.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// if services on the left are clicked
$('.services a').click(function(){
   $('.selected').attr('class',''); // a service is clicked, make any, if selected, as not selected
   // when we click one service we need to emphasize that it is selected
   $(this).attr('class','selected'); // set current link as selected	
 
   // get the services classes
   var classesString  = $(this).parent().attr('class');
   var classes = classesString.split(' '); // now classes contains all class attributes of the service clicked
   // loop through all classes
   for(var i=0;i < classes.length;i++)
      {
      // set selected to all clients that have such a service
      $('.clients li.'+classes[i]+' a').attr('class','selected');
      }
});

When clicking a client, same thing happens but exactly the other way. We first get the class attribute of the client to check out the services bought and then loop through those services and set them as selected. Pretty neat! Here's the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// if clients on the right are clicked
$('.clients li a').click(function(){
   $('.selected').attr('class',''); // a client is clicked, make any, if selected, as not selected
   // when we click one client we need to emphasize that it is selected
   $(this).attr('class','selected'); // set current link as selected	
 
   // get the client's classes
   var classesString  = $(this).parent().attr('class');
   var classes = classesString.split(' '); // now classes contains all class attributes of the client clicked
   // loop through all classes
   for(var i=0;i < classes.length;i++)
      {
      // set selected to all services that were bought by the client
      $('.services li.'+classes[i]+' a').attr('class','selected');
      }
});

And we're done. You can check out the final demo over here and download the source codes over here. If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

A couple of weeks ago I talked about graceful flash degradation: what it means, issues that arise while developing in flash, and how to fix them properly. This is the second article on the topic. Before we continue, make sure you're familiar with the first article on flash degradation, because this article contains examples to emphasize what the previous article described.

Good flash degradation from New York Times

We previously stumbled upon UEFA's site and a wine company's website. Today we are looking upon a newspaper's website. The name is self explanatory, New York Times being the largest metropolitan newspaper published in the United States. Having that weight attached to their necks, they knew their online presence must be perfect. And it is.

New York Times has an online photojournalism section which is built in flash. It is consisted of a series of posts, each around an image. Each post has apart from the image, a brief paragraph describing the picture, where it was taken and so on. A nice feature is the small sneak peak to the next and previous articles, which are visible in the left and right sidebars of the article you are currently viewing. However, I don't think this was a feature they specifically developed, as the full screen mode lacks it.

What really matters here is that they also have a non flash version of the site which kicks in if you do not have the necessary plugins. They also let you know that if you want to fully enjoy the features of the site, you should install flash player. Flawless solution. Great job for New York Times, but perhaps more congrats should go to the site developers, whoever they are.

If you have any other examples or pointers please leave them in the comments section bellow. If you liked this article you can subscribe to the full content rss feed and stay updated as we post new information.

It has been quite some time since I last wrote an article here, and I hope you all enjoyed the summer and summer holiday. I read a lot of blogs each day and I must say that there's a decent amount of articles about javascript, content, and how to properly code a site when using javascript. You have to be careful because of those people who disable javascript or use old browsers that don't have such features. However, I haven't seen any articles describing some short guidelines as to what you should do when developing a site in flash.

Issues with flash developing

The first issue that has to be taken into consideration here is that while many people have flash player installed, its version may be an older one, and the site or web app you are building with flash 10 may not work correctly, or at all on some people's computers. Moreover, there are individuals that don't have flash player installed, just like the ones without javascript.

How to handle flash generated problems

The easiest option would be to develop a html version of the site. Though this is ok, the costs of such a solution grow as the site grows. This is ok for small sites or sites that are not updated frequently. What happens when you have a big site, with content updated on a daily basis?

One interesting solution, which I definitely like is the one adopted by UEFA (Union of European Football Associations). Their website is not entirely flash, but has many flash sections. One of them is a content slider, which could have been built using javascript. They used flash and that is ok too, but how they fix search engine issue that come by using flash. How can people using mobile devices like the iPhone - which doesn't have flash - browse their website and read valuable content?

The solution is quite simple. UEFA's website displays all content headlines as plain text. Those headlines were previously bundled with images in the flash content slider. Moreover, the headlines appear in the same area of the site, leaving the layout uncrippled. Another important feature is that they also display a small button telling their visitors that if they want to fully enjoy the site they should install flash player. They also link to Adobe's download page.

UEFA does a great job making a well developed website, but they have their own pitfalls. During the UEFA Champions League and UEFA Europa League draws, which took place last week, their live coverage of the event had only flash versions, rendering blank pages for users without flash player. Mobile users had to make phone calls in order to find out the group of their favorite team.

A website that does a bad job about non flash user experience is vinuldenunta.ro . Such users do see something other than a blank page. They are presented with a small paragraph which unfortunately isn't formatted in any way, leaving the impression the site is under construction. No information is provided regarding the cool flash version of the site that is hidden to them.

Pointers for better flash developing

• 1. If possible, provide a non flash version of the site
• 2. If important content is displayed within flash, make sure it is available for users that do not have flash player
• 3. Don't use flash for navigation, and if you do, provide a secondary navigation menu using html
• 4. If you only have flash version, make sure you let non flash users know about that

The above are just some basic pointers, but sticking to them will insure a high quality website. If you have any other examples or pointers please leave them in the comments section bellow. If you liked this article you can subscribe to the full content rss feed and stay updated as we post new information.

Here's a demo, and here's the source code for the demo. If you liked this article you can subscribe to the full content rss feed and stay updated as we post new information.

Reset default value of text

Most web developers reset the default font-size of text so that further problems are easily tackled. Without proper resets it would be very difficult to set font-sizes of 11 px, 13px and so on. 1 em is equal to 16 px by default. In order to rapidly convert your pixel thoughts to ems, you'd be better of resetting 1 em to 10 px, which is setting it to 62.5%. We achieve this by placing in the body css tag the following: "font-size:62.5%;". This will make 1 em equal exactly 10 pixels.

Some issues

Many users set for links a font size that is smaller or bigger than the actual font size of the paragraph text. This is ok, but when ems are used, their settings are relative to their parent. Having the paragraph text set to 1.2 em (12 pixels), will not make a link 10 pixels if you use 1em setting. 10 pixels are actually 83% out of 12 pixels. This means that the link settings should be 0.83em instead of 1em. Similarly, to achieve 13 pixels links, you shouldn't use 1.3em, but 1.08em instead, as 13 pixels is 108% out of 12 pixels. It is as simple as that.

Check out a demo and download the source files. If you liked this article you can subscribe to the full content rss feed and stay updated as we post new information.

So I proud myself that all websites I develop for my clients are cross browser. I usually test them on different platforms, different screen resolutions, different browsers. I use my own resources to do that, or I use online businesses that provide exactly these screening services so that you can test your site on more than 50 browsers.

However, there's a point where I stop looking back. That is IE 5.5 for Internet Explorer, Firefox 1.5 for Firefox, and so on. Yesterday I took a look through one of my site's logs and I have found that somebody visited my site using IE 2. Yes, I am not kidding. The operating system was Windows 95!

You would lie yourself if you'd say that such antique operating systems and browsers are not in use anymore. The fact is that they are. The basic question is have you ever thought how your site looks on IE 2? Or some early versions of Firefox? I haven't done so until yesterday, but I will now try to get my hands on some PC that I can use to make those tests for IE 2 and alike.

And what if you site is not even readable on such a browser? Of course the percent of such users is under 1%, but what if that was a client that would have bought services of thousands of dollars? One solution I think that could work is using a design similar to one generated for printing the webpage, but applied by default for old browsers. Using javascript to check the browser wouldn't probably work, because javascript was invented in '95, and I highly doubt that '95 browsers use it.

Conclusion

Perhaps you shouldn't design for browsers that are this old (more than 10 years), but I think that 30 more minutes to develop a style sheet that will make the site usable for such browsers is time well spent. Overall, this will only show your professionalism.

I hope you enjoyed this article. Let me know what you think about it in the comments. If you liked this one, you can stay updated to upcoming articles via the rss feed.

The temporary solution

This issue has a relatively fast solution. You just put a negative left margin to the post info box, and it should go right out of there. This works relatively ok. The problems is that only really new browsers had no issues with this. I tested on IE 6, Firefox 1.06 and the post info box with negative margins disappeared from the view. That was due to the fact that the negative margin moved the box outside the content wrapper.

That could have been easily fixed by expanding the content wrapper with the post info box width, and floating the content to the right. Basically, this would have been a faux column layout inside another faux column layout. It works great, but when you hit the next problem, there are no apparent solutions at the horizon.

What if you want rounded corners? CSS 3 rounded corners!

The problem with rounded corners is that you cannot expand the content wrapper, as the corners would go away from the content, rendering the layout useless. (check out the below image). The solution I found was to add a new wrapper, which would wrap the post info box, the content boxes (multiple posts have multiple boxes), and the side wrapper.

That new wrapper looks great. All you need to do is to add left rounded corners to the content boxes, and right rounded corners to the side wrapper. WRONG! That would work in most cases, but if you have a really long side wrapper, chances are you will have pages with content that do not have the same height! And that's when the cookie crumbles. Check out how you could end up with your background.

We put all that thinking into it and it looks like it doesn't work. Ok then, Browsers 1 - Developers 0. Some say you can fix this problem with going to css height and min-height properties. Having a body , html and wrappers with height:100%, and the last content box having min-height:100% should fix the problem. Well it doesn't. It does that if you don't have many nested wrappers. If you have many wrappers, it works only if the content area's height is lower than that of the side wrapper. If it is higher, you get the original problem (just the one you see in the screen above), but transferred to the side wrapper. Browsers 1 - Developers 1 because the problem is partially solved.

The ultimate solution

After struggling for around 2 and a half hours with height, min-height and wrapper variations, after not reaching any solution, I fixed this in 10 minutes with jQuery. Who would have though that the solution is that simple? So what was the jQuery code to handle this issue.

Remember we had a content wrapper, containing content boxes, one for each post? We also have the side wrapper. The solution is to get the height of the side wrapper, the height of the content wrapper, which grows due to the content boxes, and then compare the two values. If the content wrapper's height is smaller, you should increase it to match that of the side wrapper. But how?

One span and jQuery to the rescue!

You simply add a span tag to the end of the last content box, not the content wrapper. If the height of the content wrapper is smaller than that of the side wrapper, set the span tag's height to be the difference between the mentioned 2 heights. The result, no matter which box is the highest, is the one you see on this very own site. With rounded corners. All the time. Browsers 1 - Developers 2.

The jQuery code

	var diff = 0;
	var sideWrapper = 0;
	var cWrapper = 0;
	sideWrapper = $('#sidewrapper').height();
	cWrapper = $('#cwrapper').height();
	if(cWrapper < sideWrapper)
		{
			diff = sideWrapper - cWrapper;
			$(".end").height(diff);
		}

I hope you enjoyed this article. Let me know what you think about it in the comments. If you liked this one, you can stay updated to upcoming articles via the rss feed. A demo, and full source of this layout will be soon available.