May 2nd, 2011 at 1:35 pm

Stablize floating containers with overflow: hidden

A large majority of web designers still uses the CSS property clear: both to stabilize floating boxes in CSS layouts:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<style type="text/css">
		div            { border: 1px solid #444; padding: 15px; margin: 5px; }
		.div1, .div2   { height: 100px; width: 100px; float: left}
		.clear         { clear: both }
	</style>
	<title>Demo</title>
</head>
<body>
	<div class='container'>
		<div class='div1'>div1</div>
		<div class='div2'>div2</div>
	</div>
	<div class='clear'></div>
</body>
</html>

However, there is a much more elegant way to solve the problem – with overflow: hidden. This solution is known since many years, but nobody ever uses it. Instead, everybody is moaning about clear: both.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<style type="text/css">
		div             { border: 1px solid #444; padding: 15px; margin: 5px; }
		.container      { overflow: hidden; }
		.div1, .div2    { height: 100px; width: 100px; float: left}
	</style>
	<title>Demo</title>
</head>
 
<body>
	<div class='container'>
		<div class='div1'>div1</div>
		<div class='div2'>div2</div>
	</div>
</body>
</html>

Why is it more elegant? Because it doesn’t create an extra element, and all CSS properties only influence the behaviour of the elements they’re applied to.

Where’s the catch? There’s none. This works in all major browsers, including IE 6. You can float left or right. You can give inner and outer elements margin, padding, height, width. You can nest floating elements. So why is everybody using clear:both? I don’t know.

My guess is that it is evolutionary. Somebody influential started with bad code, and everybody else just copied it.

Comments: 0 Categories: Code Tags: , , , ,

December 18th, 2007 at 10:07 am

Improve loading speed of webpages by compressing HTML

Here’s a simple HTML “compressor” in PHP, which will reduce the size of HTML served to the client by 10 to 20 percent, depending on your indentation style and commenting. If many of your readers have lousy bandwidth, the slight overhead of this method is worth it.

<?php
	function compress($content)
	{
		$content = preg_replace('/[\n\t\s]+/s', ' ', $content);
		$content = preg_replace('/<!--.*?-->/s', '', $content);
		return $content;
	}
 
	ob_start();
	require "/var/www/htdocs/somefile.php";
	$content = ob_get_contents();
	ob_end_clean();
 
	echo compress($content);
?>

By the way, if you have a rather hungry dynamic application (e.g. WordPress with certain plugins) on a rather weak server, consider using a caching solution, so you don’t have to regenerate the pages everytime somebody retrieves them. And, of course, consider using output gzip compression – be it via webserver modules such as mod_gzip/mod_deflate or based on your web application.

Comments: 0 Categories: Code Tags: , , ,