Ajax Loader
HTML 
<p>Basically, this is just a simple fixed-fluid layout implementation. The problem for implementation with form elements is that, an input element cannot be set as a full width element automatically without <code>width</code> property even when we set it as a block element.</p><p>They are different with <code>div</code>-s &hellip;</p><p>So here I use a separate <code>&lt;div&gt;</code> to handle the fixed width value for the button. We are going to make the search field to be expandable but not for the search button. Here's the basic concept with simplified <abbr title="Hyper Text Markup Language">HTML</abbr> markup and simplified <abbr title="Cascade Style Sheet">CSS</abbr> code:</p><h3>HTML Markup</h3><pre><code>&lt;form&gt;
1
<p>Basically, this is just a simple fixed-fluid layout implementation. The problem for implementation with form elements is that, an input element cannot be set as a full width element automatically without <code>width</code> property even when we set it as a block element.</p><p>They are different with <code>div</code>-s &hellip;</p><p>So here I use a separate <code>&lt;div&gt;</code> to handle the fixed width value for the button. We are going to make the search field to be expandable but not for the search button. Here's the basic concept with simplified <abbr title="Hyper Text Markup Language">HTML</abbr> markup and simplified <abbr title="Cascade Style Sheet">CSS</abbr> code:</p><h3>HTML Markup</h3><pre><code>&lt;form&gt;
2
  &lt;div&gt;
3
    &lt;input type="text"&gt;
4
    &lt;input type="submit" value="Search"&gt;
5
  &lt;/div&gt;
6
&lt;/form&gt;</code></pre><h3>CSS</h3><pre><code><span class="cm">/*
7
First, we set the `box-sizing` value as `border-box` so ...
8
we could easily expand this element to 100% width without worrying about
9
the `padding` and `border-width` calculation.
10
*/</span>
11
 
12
form input {box-sizing:border-box}
13
 
14
 
15
<span class="cm">/*
16
create the room for the button using `margin`
17
*/</span>
18
 
19
form &gt; div {
20
  position:relative;
21
  margin-right:110px; <span class="cm">/* same with `button width` + `button distance from search field` */</span>
22
}
23
 
24
 
25
<span class="cm">/*
26
SEARCH FIELD: the `box-sizing` value for this element already set as `border-box`
27
and the right margin value also already set with the correct value
28
to make the room for the button, so now we could safely
29
expand this element to 100% width!
30
*/</span>
31
 
32
form input[type="text"] {
33
  display:block;
34
  width:100%;
35
}
36
 
37
 
38
<span class="cm">/*
39
SEARCH BUTTON: the last step is to make the button pushed to the right by using absolute position
40
(you could use `float:right` for this but you have to put the button markup before the text field,
41
so if the CSS is disabled, destroyed or whatever, the search box appearance will looks ugly because
42
the search button appears before the search field!!!)
43
*/</span>
44
 
45
form input[type="button"] {
46
  display:block;
47
  width:100px; <span class="cm">/* this is the `button width` */</span>
48
  position:absolute;
49
  top:0;
50
  left:100%; <span class="cm">/* push to the right! */</span>
51
  margin-left:10px; <span class="cm">/* this is the `button distance from search field` */</span>
52
}</code></pre>
53
 
54
 
55
 
56
<h3>Demo</h3>
57
<p>Now you can put this search box inside your fluid sidebar, your fluid column, your fluid header, your fluid article, etc&hellip; without worrying if the button will shifted or moved underneath the search field awkwardly because of the limited container width&hellip;</p>
58
 
59
<div class="col-group">
60
  <div>
61
    <form class="form-search">
62
      <div class="form-search-wrapper">
63
        <input type="text" class="form-search-field" spellcheck="false">
64
        <input type="submit" class="form-search-submit" value="Search">
65
      </div>
66
    </form>
67
  </div>
68
</div>
69
 
70
<div class="col-group">
71
  <div class="col-left">
72
    <form class="form-search">
73
      <div class="form-search-wrapper">
74
        <input type="text" class="form-search-field" spellcheck="false">
75
        <input type="submit" class="form-search-submit" value="Search">
76
      </div>
77
    </form>
78
  </div>
79
  <div class="col-right">
80
    <form class="form-search">
81
      <div class="form-search-wrapper">
82
        <input type="text" class="form-search-field" spellcheck="false">
83
        <input type="submit" class="form-search-submit" value="Search">
84
      </div>
85
    </form>
86
  </div>
87
</div>
88
 
89
<div class="col-group">
90
  <div class="col-left col-group">
91
    <div class="col-left">
92
      <form class="form-search">
93
        <div class="form-search-wrapper">
94
          <input type="text" class="form-search-field" spellcheck="false">
95
          <input type="submit" class="form-search-submit" value="Search">
96
        </div>
97
      </form>
98
    </div>
99
    <div class="col-right">
100
      <form class="form-search">
101
        <div class="form-search-wrapper">
102
          <input type="text" class="form-search-field" spellcheck="false">
103
          <input type="submit" class="form-search-submit" value="Search">
104
        </div>
105
      </form>
106
    </div>
107
  </div>
108
  <div class="col-right col-group">
109
    <div class="col-left">
110
      <form class="form-search">
111
        <div class="form-search-wrapper">
112
          <input type="text" class="form-search-field" spellcheck="false">
113
          <input type="submit" class="form-search-submit" value="Search">
114
        </div>
115
      </form>
116
    </div>
117
    <div class="col-right visible-outline">
118
      <form class="form-search">
119
        <div class="form-search-wrapper">
120
          <input type="text" class="form-search-field" spellcheck="false">
121
          <input type="submit" class="form-search-submit" value="Search">
122
        </div>
123
      </form>
124
    </div>
125
  </div>
126
</div>
 
CSS 
/* Ignore this! */
1
/* Ignore this! */
2
 
3
@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,700');
4
 
5
* {
6
  margin:0;
7
  padding:0;
8
}
9
 
10
body {
11
  background-color:#EDEDE8;
12
  font:normal normal 16px/1.4 "Open Sans",Segoe,"Segoe UI",Frutiger,"Frutiger Linotype","DejaVu Sans","Helvetica Neue",Arial,Sans-Serif;
13
  color:#333;
14
  text-shadow:0 1px 0 white;
15
  padding:10px 0 0 10px;
16
}
17
 
18
abbr {
19
  border-bottom:1px solid #aaa;
20
  font-weight:bold;
21
  background-color:#e5e5e5;
22
  padding:0 3px;
23
  cursor:help;
24
}
25
 
26
p,
27
pre {margin:0 10px 10px 0}
28
 
29
code {
30
  font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;
31
  font-size:14px;
32
}
33
 
34
pre {
35
  line-height:1.2;
36
  background-color:white;
37
  padding:1em;
38
  overflow:auto;
39
  border-radius:3px;
40
  box-shadow:0 1px 1px rgba(0,0,0,.1);
41
}
42
 
43
.cm {
44
  color:#999;
45
  font-style:italic;
46
}
47
 
48
h3 {
49
  font-weight:bold;
50
  margin:20px 10px 10px 0;
51
}
52
 
53
.col-group {overflow:hidden}
54
 
55
.col-left {
56
  width:50%;
57
  float:left;
58
}
59
 
60
.col-right {
61
  width:50%;
62
  float:right;
63
}
64
 
65
@media (max-width:600px) {
66
  .col-left,
67
  .col-right {
68
    float:none;
69
    display:block;
70
    width:auto;
71
  }
72
}
73
 
74
 
75
/*
76
==========================================================================
77
  CSS for Fluid Width Search Box
78
==========================================================================
79
 
80
    <form class="form-search">
81
      <div class="form-search-wrapper">
82
        <input type="text" class="form-search-field">
83
        <input type="submit" class="form-search-submit" value="Search">
84
      </div>
85
    </form>
86
 
87
==========================================================================
88
==========================================================================
89
*/
90
 
91
button::-moz-focus-inner,
92
input::-moz-focus-inner {
93
  margin:0;
94
  padding:0;
95
  border:none;
96
  outline:none;
97
}
98
 
99
.form-search {margin:0 10px 10px 0}
100
 
101
.form-search-field,
102
.form-search-submit {
103
  display:block;
104
  background-color:white;
105
  color:#666;
106
  font:inherit;
107
  line-height:normal;
108
  border:1px solid #ccc;
109
  border-top-color:#aaa;
110
  padding:10px;
111
  outline:none;
112
  box-sizing:border-box;
113
  text-shadow:none;
114
  text-align:left;
115
}
116
 
117
.form-search-wrapper {
118
  position:relative;
119
  margin-right:125px;
120
}
121
 
122
.form-search-field {
123
  width:100%;
124
  box-shadow:inset 0 1px 1px rgba(0,0,0,.1);
125
}
126
 
127
.form-search-submit {
128
  width:115px;
129
  padding-right:0;
130
  padding-left:40px;
131
  background:#4c8c00 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3QwPCzE0FFtE4AAAAQlJREFUOMuVkr1KxFAUhOekUrAR/CksfActRX0BS0HEF7BbsBQLkbW2ULBSe8VCWB9EEBsFwdLOdQVxYT+biVzCJt4MBHLnzJmbkzOhBMCcpF1JG5IWTb9J6kk6j4h31QHYBgbUYwDs1DVvAiMLb4E1YNrPKnDj2gjYqjbPAB8WHDZ84YE1fY/6Vzhyoad/ANxZe5ySDybXMwxWrH1MyU+TUxkGE9Z+AyFJhdohJJH2FZJe/b6cYbBkk5eIoDS4d7GTYVBqrtO55pM17jXM37FmCMzmBGnSPy0NUokroBgX5a+GKA8r58txJgvACfAM/Fj4BOw7sRcVk9NWOwQK31yir7awyZnD1P0F9SaVT76pzq4AAAAASUVORK5CYII=') no-repeat 15px 50%;
132
  border-color:#467903 #467903 #243e03;
133
  color:white;
134
  position:absolute;
135
  top:0;
136
  left:100%;
137
  margin-left:10px;
138
  cursor:pointer;
139
  box-shadow:1px 1px 1px rgba(0,0,0,.2);
140
}
141
 
142
.form-search-submit:focus,
143
.form-search-submit:hover {
144
  background-color:#488100;
145
  border-bottom-color:#1c3103;
146
}
 

Fluid Width Search Box

CSSDeck G+