I am using CSS to align two divs side by side.
One div contains an image. The other div contains a search box.
The search box is vertically aligning at the baseline and I would like it to align to the top. I even changed the master style sheet (and used the !important rule) to remove the baseline reference and the search box still aligns to the bottom.
How can I align the contents of the second div (search box) to the top?
[CODE]
<div style=”background-color:#fff; width:960px; height:29px; max-width: 100%; -ms-interpolation-mode: bicubic;”>
<div style=”float:left;”><img src=”imagehere” alt=”Txt” width=”498″ height=”27″ /></div>
<div style=”float:right; max-height:28px;” vertical-align:top !important;”/>
<!– START SEARCH –>
<form method=”get” id=”searchform” action=”http://#/”>
<fieldset>
<input type=”text” name=”s” id=”s” value=”search products” />
<input type=”submit” id=”searchsubmit” value=”GO” />
</fieldset>
</form>
<!– END SEARCH –>
</div>
</div>
Here is the master style sheet:
[CODE]
*/
/***********************************************************************
******************* reset.css ******************************************
************************************************************************/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate; border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
th {color:#757475;line-height:40px;min-height:40px;text-align:center;padding:10px;font-weight:bold;}
blockquote:before, blockquote:after, q:before, q:after { content:””; }
blockquote, q { quotes:”” “”; }
a img {border:none;}
.clearer {height:0px;overflow:hidden;margin:0px;clear:both;}
.center {text-align:center;}
/* self-clear floats */
.group:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; overflow:hidden; }
/* ie.css */
* html .group { /* IE6 */
height:1%;
}
*:first-child+html .group { /* IE7 */
min-height:1%;
}
/***********************************************************************/
html, body, div, p{
margin: 0;
padding: 0;
border: 0;
}
img { border:0 }
/* Main Layout */
html { min-height:101% }
body { font-family: ‘Calibri’, ‘Droid Sans’, Verdana, Arial, sans-serif; font-size: 12px; font-weight: normal; background: #4A4848; line-height:1.8em; }
/* typography */
p, li, address, dd, blockquote, td, th { color:#545252; font-size:1em; line-height:1.81em }
body, p, li, address, dd, blockquote { color:#545252; }
h1, h2, h3, h4, h5, h6, p, dl, ul, ol { margin:0.8em 0 0.3em; }
a, a:hover { text-decoration:none }
a { font-family: ‘Calibri’, ‘Droid Sans’, Verdana, Arial, sans-serif; color:#9A6614; }
a:hover { color: #6C6C6C; }
h1, h2, h3, h4, h5, h6 { color: #232221; font-family:”Rokkitt”,”Georgia”, “Times New Roman”, serif; letter-spacing:1px; }
h1 { font-size:1.8em }
h2 { font-size:1.4em }
h3 { font-size:1.2em }
h4 { font-size:1.1em }
h5 { font-size:1em }
h6 { font-size:1em }
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {color:#A05F02;}
#content ul { margin-left:20px; list-style:square }
#content ol {margin-left:40px; }
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { /*padding: 0 10px*/ }
i, em { font-style:italic; }
strong { font-weight:bold; }
#content blockquote { background:url(‘images/cite.png’) no-repeat 45px 25px; padding:35px; }
.border-line { height:1px; background:#ddd; width:100%; clear:both; margin:1.2em 0; }
dt { font-weight:bold; }
.line { border-top:1px solid #cacaca }
.space { height:30px }
body .last, body .widget-last { margin-right:0; border-right:0; }
body .last-row {margin-bottom:0;}
#sidebar .widget-last {margin-bottom:0;}
.for-mobile {display:none !important;}
.not-logged-in .not__logged_in {display:none !important;}