/    Sign up×
Community /Pin to ProfileBookmark

Problem aligning divs side by side w/ vertical alignment top

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>

[/CODE]

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;}

[/CODE]

to post a comment
CSS

1 Comments(s)

Copy linkTweet thisAlerts:
@absolutmgd13Jun 27.2012 — <div style="float:right; max-height:28px;" vertical-align:top !important;"/>

should be

<div style="float:right; max-height:28px; vertical-align:top !important;">
×

Success!

Help @ne_plus spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...