outbreak

There’s been a lot of fluid layouts recently. When you use a fluid layout it’s hard to make everything fluid as you need to stretch certain elements and have other elements fixed.

I was approached some time ago by a designer who was working on a fluid design but was having problems with a HTML/CSS only solution for a fluid searchbox. The idea to create a searchbox that grows when the window grows is simple, but becomes a tad more difficult when you add stuff to the left and right of it, some being fixed width (width in px or em) and some fluid width (width in %).

As I like challenges I took it on and produced a sample that worked on most modern browsers in a single evening. They didn’t like it because it didn’t work in IE7 (cause I never checked it) even though the fix for IE (it was only IE7 that didn’t work) was trivial. After a while I went back and checked it out again, changed the code a bit and I think it’s much better now.

The simple form

Creating a fluid search box when you only have a single element next to it is trivial. What you do is wrap the input in an element and use padding to create space for the fixed element, then position the fixed element absolutely (or relatively) in the space created by the padding.

HTML:

<fieldset>
	<div>
		<input type="text" name="q" value="" />
	</div>
	<input class="s" type="submit" value="Search" />
</fieldset>

CSS:

fieldset {position:relative;padding:0;}
div {padding-right:6em;}
div input {width:100%;}
input.s {width:5em;font-size:1em;position:absolute;right:0;top:0;}

Sample

You could target the input with input[type=submit] but that wouldn’t work in older browsers.

A complex form

The complex form from the intro includes a title, a search type drop-down (select element), the input box and a submit button. This gives us four elements, two of which are fixed and two fluid – and more stuff to hack around.

HTML

<fieldset>
	<div class="l">
		<span>Find</span>
		<select name="type">
			<option>in Books</option>
			<option>in DVDs</option>
		</select>
	</div>
	<div class="c">
		<input type="text" value="" name="q" />
	</div>
	<div class="r">
		<input type="submit" value="Search" />
	</div>
</fieldset>

CSS

fieldset {margin:0;padding:0;position:relative;border:0;}
fieldset .l {height:0;}
fieldset .l span {width:3em;display:inline-block;}
fieldset .l select {width:10%;}
fieldset .c {margin:0 60px 0 4em;padding:0 .7em 0 10%;}
fieldset .c input {width:100%;}
fieldset .r {position:absolute;right:0;top:0;}
fieldset .r input {width:60px;}
* html fieldset .l {float:left;width:100%;margin-right:-100%;}

The basics

I created three elements that help me align elements. I’m using classes l for left, c for center and r for right. The left element includes the title and the type, the central element includes the search box and the right element includes the submit button.

fieldset .l {height:0;}
fieldset .r {position:absolute;right:0;top:0;}

The left element has its height set to 0 so it seemingly doesn’t take any space. The central element includes the input and needs no special positioning, while the right element is positioned similar to the simple solution – absolute and set to right.

The surrounding elements

You can set the width of these elements in any unit you like. I set the width for the span element in em, type drop-down in % to make it fluid and submit button in px.

fieldset .l span {width:3em;display:inline-block;}
fieldset .l select {width:10%;}
fieldset .r input {width:60px;}

The only thing you need to do in CSS is set the width to these elements. You need to set the display property on the span element to work around the fact that inline elements don’t allow setting of width.

The fluid input

fieldset .c {margin:0 60px 0 4em;padding:0 .7em 0 10%;}
fieldset .c input {width:100%;}

The input needs its width set to 100% so it will stretch the whole available width of the parent. That happens due to the fact that block-level elements will grow to 100% automatically and the margin and padding will “shrink” its contents. This allows setting the spacing in two different units – one for margin and one for padding. If you look at the CSS rule, you’ll see that the widths are similar to those set for the surrounding elements – of course with some spacing added.

• Right: 60px margin (width of the submit button), .7em padding (spacing)
• Left: 4em margin (3em for the title + spacing), 10% padding (type select width)

The browsers

You can check out a sample page with the complex form. Working on Windows I’ve tested it in these browsers:

• Firefox: 2.0, 3.0, 3.5
• Opera: 10
• Safari: 4
• Google Chrome: 3
• Internet Explorer: 8 (with its rendering of IE7 Standards and Quirks)

As always at least one browser had to fail – IE6 did. The problem was height:0; as IE6 will render elements as high as their content. We can work around this by changing the way we make it zero width/height so it doesn’t affect the central element.

* html fieldset .l {float:left;width:100%;margin-right:-100%;}

I’m using the IE6 CSS filter to target IE6, you can use conditional comments or whatever you like best. The rule floats the element left, making it 100% wide, but resets the position by setting the right margin to -100%.

As I’m using display:inline-block; this will work a bit different on browsers that don’t support inline-block. In Firefox 2.0 you can use display:-moz-inline-box; in the rule for the span, but make sure you put it before the inline-block.

fieldset .l span {width:3em;display:-moz-inline-box;display:inline-block;}

Last words

You might want to fix some stuff in some browsers so everything aligns nice. The techinque used is derived from the multi-unit any-order column layout by Eric Meyer as it opens your mind on how to use multiple units in a single layout without fuss. I’ve tried all the browsers I have on my dev machine and I’m not saying it works everywhere. If you find a browser where it doesn’t post a comment; if you find a better way of doing things also post a comment.