outbreak

Me

My name is Marko Mrdjenovič. I’m a web developer, manager and an entrepreneur from Ljubljana, Slovenia.

Bio

I like solving problems. I do that by writing code, managing projects and people. I like creating good experiences. And going to conferences.

Availability

I work full time on CubeSensors so I'm currently not available for freelance work (UX, frontend, backend).

Elsewhere:
LinkedIn
Twitter
Facebook
Quora
Flickr
Marela
Last.fm
Dopplr
Delicious
Huffduffer

Archives

Fluid searchbox

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.

The browsers

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

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.

Reblog this post [with Zemanta]

Opinions

express yours below
  1. Mentioned in Laura Carlson (lauracarlson) 's status on Thursday, 08-Oct-09 17:29:13 UTC - Identi.ca

  2. Mentioned in 50+ Fresh CSS Techniques, Tutorials and Resources » Shai Perednik.com

  3. Mentioned in 50+ Fresh CSS Techniques, Tutorials and Resources « Graphic Art Source

  4. Mentioned in 50+ Fresh CSS Techniques, Tutorials and Resources | Theme Center

  5. Mentioned in 50+ Fresh CSS Techniques, Tutorials and Resources | Gacik Design Blog

  6. Mentioned in 50+ Fresh CSS Techniques, Tutorials and Resources | Design-Tut+

  7. Alex

    awesome, thank you :)
    Just ending a headache…
    :) !

  8. Mentioned in 25+ Tutoriais CSS e jQuery, Recursos e Técnicas

  9. Mentioned in 50 Fresh CSS Techniques, Tutorials and Resources - Noupe

  10. Mentioned in zomigi.com » 70+ essential resources for creating liquid and elastic layouts

  11. Mentioned in 50 Coding Techniques For Layouts, Visual Effects and Forms (CSS/jQuery) - Smashing Magazine

  12. Mentioned in 50 Coding Techniques For Layouts, Visual Effects and Forms (CSS/jQuery) - Smashing Magazine

  13. Mentioned in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | Web Design Cool

  14. Mentioned in jean philippe gousse » Blog Archive » 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)

  15. Mentioned in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) « Free Templates and theme

  16. Mentioned in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | Tutorial51

  17. Mentioned in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) « eggtea.com

  18. Mentioned in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | BestWebMagazine

  19. Mentioned in 50+ Fresh CSS Techniques, Tutorials and Resources « Oviyas Blog

  20. Mentioned in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) « WebGlide - UX

  21. Mentioned in 50+ Fresh CSS Techniques, Tutorials and Resources « Alanalanya's Blog

  22. Mentioned in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)

  23. Mentioned in 50+ Fresh CSS Techniques, Tutorials and Resources

  24. Mentioned in 50+ Most Wanted CSS Techniques, Tutorials and Resources | Webwibe

  25. Mentioned in 40 Useful CSS Tutorials, Techniques And Resources | Free and Useful Online Resources for Designers and Developers

  26. Mentioned in 40 Useful layout by CSS Tutorials including Techniques And Resources « 68Design – (68ds.com) Creative Design Transmitter

  27. Mentioned in 50 FRESH CSS Techniques and Tutorials from Noupe - Internal Support

  28. Sviatoslav

    Thank you for sharing. This solution seems to be obvious, however I’ve managed to frustrate myself while trying to create responsive header with couple of breakpoints.

Express your opinion