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.
- 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.
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=6a47e4e4-04fd-4357-b788-c5ea937c07fa)
October 8th, 2009
in Laura Carlson (lauracarlson) 's status on Thursday, 08-Oct-09 17:29:13 UTC - Identi.ca
[...] http://friedcellcollective.net/outbreak/2009/10/04/fluid-searchbox/ a few seconds ago from web [...]
December 3rd, 2009
in 50+ Fresh CSS Techniques, Tutorials and Resources » Shai Perednik.com
[...] Fluid SearchboxCreating a search box that adjusts to the size of the browser window is simple, but becomes difficult when you add elements to the left and right of it, some being fixed width (width in px or em) and some fluid width (width in %). This article demonstrates a solution to this problem. [...]
December 3rd, 2009
in 50+ Fresh CSS Techniques, Tutorials and Resources « Graphic Art Source
[...] Fluid Searchbox Creating a search box that adjusts to the size of the browser window is simple, but becomes difficult when you add elements to the left and right of it, some being fixed width (width in px or em) and some fluid width (width in %). This article demonstrates a solution to this problem. [...]
December 6th, 2009
in 50+ Fresh CSS Techniques, Tutorials and Resources | Theme Center
[...] Fluid Searchbox Creating a search box that adjusts to the size of the browser window is simple, but becomes difficult when you add elements to the left and right of it, some being fixed width (width in px or em) and some fluid width (width in %). This article demonstrates a solution to this problem. [...]
December 7th, 2009
in 50+ Fresh CSS Techniques, Tutorials and Resources | Gacik Design Blog
[...] Fluid Searchbox Creating a search box that adjusts to the size of the browser window is simple, but becomes difficult when you add elements to the left and right of it, some being fixed width (width in px or em) and some fluid width (width in %). This article demonstrates a solution to this problem. [...]
December 9th, 2009
in 50+ Fresh CSS Techniques, Tutorials and Resources | Design-Tut+
[...] Fluid Searchbox Creating a search box that adjusts to the size of the browser window is simple, but becomes difficult when you add elements to the left and right of it, some being fixed width (width in px or em) and some fluid width (width in %). This article demonstrates a solution to this problem. [...]
December 29th, 2009
by Alex
awesome, thank you :)
Just ending a headache…
:) !
January 11th, 2010
in 25+ Tutoriais CSS e jQuery, Recursos e Técnicas
[...] Criando uma caixa de pesquisa que se ajusta ao tamanho da janela do navegador [...]
January 19th, 2010
in 50 Fresh CSS Techniques, Tutorials and Resources - Noupe
[...] CSS-based breadcrumb navigation using a single graphic, some basic CSS, and an unordered list.Fluid SearchboxCreating a search box that adjusts to the size of the browser window is simple, but becomes [...]
January 25th, 2010
in zomigi.com » 70+ essential resources for creating liquid and elastic layouts
[...] Fluid searchbox (outbreak) [...]
February 18th, 2010
in 50 Coding Techniques For Layouts, Visual Effects and Forms (CSS/jQuery) - Smashing Magazine
[...] enabled, the labels of disabled inputs in the form on the right are styled with a faint gray color.Fluid Search BoxCreating a fluid search box when you have only a single element next to it is trivial. What you [...]
February 18th, 2010
in 50 Coding Techniques For Layouts, Visual Effects and Forms (CSS/jQuery) - Smashing Magazine
[...] enabled, the labels of disabled inputs in the form on the right are styled with a faint gray color.Fluid Search BoxCreating a fluid search box when you have only a single element next to it is trivial. What you [...]
February 18th, 2010
in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | Web Design Cool
[...] Fluid Search BoxCreating a fluid search box when you have only a single element next to it is trivial. What you should 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. [...]
February 18th, 2010
in jean philippe gousse » Blog Archive » 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)
[...] Fluid Search BoxCreating a fluid search box when you have only a single element next to it is trivial. What you should 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. [...]
February 19th, 2010
in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) « Free Templates and theme
[...] Fluid Search Box Creating a fluid search box when you have only a single element next to it is trivial. What you should 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. [...]
February 19th, 2010
in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | Tutorial51
[...] Fluid Search BoxCreating a fluid search box when you have only a single element next to it is trivial. What you should 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. [...]
February 20th, 2010
in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) « eggtea.com
[...] Fluid Search BoxCreating a fluid search box when you have only a single element next to it is trivial. What you should 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. [...]
February 22nd, 2010
in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | BestWebMagazine
[...] Fluid Search Box Creating a fluid search box when you have only a single element next to it is trivial. What you should 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. [...]
February 24th, 2010
in 50+ Fresh CSS Techniques, Tutorials and Resources « Oviyas Blog
[...] Fluid Searchbox Creating a search box that adjusts to the size of the browser window is simple, but becomes difficult when you add elements to the left and right of it, some being fixed width (width in px or em) and some fluid width (width in %). This article demonstrates a solution to this problem. [...]
March 4th, 2010
in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) « WebGlide - UX
[...] enabled, the labels of disabled inputs in the form on the right are styled with a faint gray color.Fluid Search BoxCreating a fluid search box when you have only a single element next to it is trivial. What you [...]
October 22nd, 2010
in 50+ Fresh CSS Techniques, Tutorials and Resources « Alanalanya's Blog
[...] Fluid Searchbox Creating a search box that adjusts to the size of the browser window is simple, but becomes difficult when you add elements to the left and right of it, some being fixed width (width in px or em) and some fluid width (width in %). This article demonstrates a solution to this problem. [...]
December 3rd, 2010
in 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)
[...] Fluid Search Box62 Creating a fluid search box when you have only a single element next to it is trivial. What you should 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. [...]
February 19th, 2011
in 50+ Fresh CSS Techniques, Tutorials and Resources
[...] Fluid Searchbox Creating a search box that adjusts to the size of the browser window is simple, but becomes difficult when you add elements to the left and right of it, some being fixed width (width in px or em) and some fluid width (width in %). This article demonstrates a solution to this problem. [...]
February 25th, 2011
in 50+ Most Wanted CSS Techniques, Tutorials and Resources | Webwibe
[...] Fluid Searchbox Creating a search box that adjusts to the size of the browser window is simple, but becomes difficult when you add elements to the left and right of it, some being fixed width (width in px or em) and some fluid width (width in %). This article demonstrates a solution to this problem. [...]
July 26th, 2011
in 40 Useful CSS Tutorials, Techniques And Resources | Free and Useful Online Resources for Designers and Developers
[...] Fluid searchbox [...]
July 28th, 2011
in 40 Useful layout by CSS Tutorials including Techniques And Resources « 68Design – (68ds.com) Creative Design Transmitter
[...] Fluid searchbox [...]
September 2nd, 2011
in 50 FRESH CSS Techniques and Tutorials from Noupe - Internal Support
[...] Fluid Searchbox Creating a search box that adjusts to the size of the browser window is simple, but becomes difficult when you add elements to the left and right of it, some being fixed width (width in px or em) and some fluid width (width in %). This article demonstrates a solution to this problem. [...]