Right align search box

[chn]

I'm trying to use a centered text banner with a search box and shopping cart to the right. I got it fairly close but still would like to reduce the size the header is using up by moving the search box and shopping cart icon up to the same level as the banner text. So far I tried without success. How do I do that with CSS?

http://cwtm.smugmug.com

CSS:
/* search box */
.mysearch {
text-align: right;
}


header:
<div align="center">
<h2>Crosswinds Toastmaster Club #7858</h2>
Marshalltown, Iowa
</div>
<div class="mysearch">SMUGSEARCH |
<a href="<A href="https://www.smugmug.com/cart"><img">https://www.smugmug.com/cart"><img src="http://cdn.smugmug.com/img/spacer.gif" alt="View Cart" title="View Cart" width="21" height="18" hspace="0" vspace="0" border="0" class="shoppingcart" /></div>
<hr>

[Allen]

I'm trying to use a centered text banner with a search box and shopping cart to the right. I got it fairly close but still would like to reduce the size the header is using up by moving the search box and shopping cart icon up to the same level as the banner text. So far I tried without success. How do I do that with CSS?

http://cwtm.smugmug.com

CSS:
/* search box */
.mysearch {
text-align: right;
}

header:
<div align="center">
<h2>Crosswinds Toastmaster Club #7858</h2>
Marshalltown, Iowa
</div>
<div class="mysearch">SMUGSEARCH |
<a href="<A href="https://www.smugmug.com/cart"><img">https://www.smugmug.com/cart"><img src="http://cdn.smugmug.com/img/spacer.gif" alt="View Cart" title="View Cart" width="21" height="18" hspace="0" vspace="0" border="0" class="shoppingcart" /></div>
<hr>

Try this

/* search box */
.mysearch {
position: relative;
top: -47px;
text-align: right;
}

[chn]

Try this

/* search box */
.mysearch {
position: relative;
top: -47px;
text-align: right;
}

Thanks. That looks good. How did you come up with the -47px?

[Allen]

Thanks. That looks good. How did you come up with the -47px?
Using the Firefox WebDev add-on I could tweak it in real time.
http://dgrin.smugmug.com/gallery/1354921

[chn]

Using the Firefox WebDev add-on I could tweak it in real time.
http://dgrin.smugmug.com/gallery/1354921

Thanks. I would still have to know to use the "top" attribute. So it's great that you showed me the way.

I noticed though that my ultimate goal, making the banner area not as tall, didn't get achieved by moving the search box. I thought it was part of the reason why it was so tall. Which CSS classes would I need to mess with in order to adjust the margins of the banner text?

[Allen]

Thanks. I would still have to know to use the "top" attribute. So it's great that you showed me the way.

I noticed though that my ultimate goal, making the banner area not as tall, didn't get achieved by moving the search box. I thought it was part of the reason why it was so tall. Which CSS classes would I need to mess with in order to adjust the margins of the banner text?
Try this. In your header change this.

<div align="center">
<h2>Crosswinds Toastmaster Club #7858</h2>
Marshalltown, Iowa
</div>

to this

<div id="myHeader">
Crosswinds Toastmaster Club #7858<br />
Marshalltown, Iowa
</div>


The in CSS format it and readjust search.

#myHeader {
text-align: center;
font-size: 200%;
margin: 20px auto;
font-family: Comic Sans MS, verdana, tahoma;
color: #ccc;
}

/* search box */
.mysearch {
position: relative;
top: -75px;
left: -10px;
text-align: right;
}

Another option to get header and search on one line.

<div id="myHeader">
Crosswinds Toastmaster Club #7858 - Marshalltown, Iowa
</div>

Add the bold just above the <hr> in your header.

....
</div>
<div class="spacer"></div>
<hr>


#myHeader {
float: left;
font-size: 180%;
margin: 20px auto 0 20px;
font-family: Comic Sans MS, verdana, tahoma;
color: #ccc;
}

/* search box */
.mysearch {
float: right;
margin: 20px 20px 0 0;
}

[chn]

Thank you Allen. You helped me quite a bit. I finally got it the way I like it. :thumb