CSS Help Required - One line of code only, will pay

I've spent the past 2 hours on something, which should only take me a few minutes! At the top of the page, the logo should be to the left and the search box to the right side.

I think my problem relates to floats and can give you an example of it working on one of my sites and not on another.

Working version:
http://www.uncoverchina.com/ucc799973256_tourist_attractions.html

Non working version:
http://www.uncoverhongkong.com/activities/tourist-attractions/

I've narrowed it down to this code too (I changed the H1 tags):

Uncover China Code: 

#uchome2 {
padding-right : 0; 
padding-left : 0; 
padding-bottom : 0; 
margin : 0; 
padding-top : 0; 
position : relative; 
top : 40px; 
left : 24px; 
}
#uchome2 IMG {
left : 1px; 
position : absolute; 
} 


Uncover Hong Kong Code:

h1 {
font-size:28px;
color:#7b8d6c;
margin-top:2px;
overflow:hidden;
text-indent:-9999px;
}

h1 a:link,h1 a:visited {
display:block;
background:url(/shared/images/logo_small.gif);
margin-top:40px; 
margin-left:24px;
width:250px;
height:35px;
}

h1 a:hover {
background:url(/shared/images/logo_small.gif);
margin-top:40px; 
margin-left:24px;
}

Code (markup):

 

I think you just need to put float: right; to the #sform css and then adjust it with relative positioning.

 

You can either do that (float the form right) or put the form before the h1 in the code and float it right and do nothing to the h1 (prolly not what you want though).

Since your container is a fixed width, you COULD float both of them left, but then you'd need to make sure they are the appropriate width and I've found forms need a bit of wiggle room cross-browser. Though you're wrapping your form in a div for some reason... you could just set the width on that div and float it, which will move the form.

On your "working version" you are using relative positioning and this one time, it worked. However, know that when you move things with relative positioning, you are NOT moving the box. You are moving a PICTURE of the box, and since the actual box is still in the old place, you will see a gap if something else is trying to move into its old place.

When you float stuff, other things can slide into its place, because you are actually moving the box itself. Same goes for moving things with margins.

I'm looking in FF3 (craptastic browser) which is dropping your submit/search button... I suspect you mean for it to stay at the right side of the text input? For FF3 that means the form needs to be a bit wider.

 

Thanks guys, I'll start with the first reply and work my way down. I thought it had something to do with floats, but since I copied Yahoo's float:left technique and used it on the site...then it didn't work..I was scratching my head!

 

couldnt he just float the left box to the left and leave the right box alone, but get rid of the div containing the table (since the table would act like a block element) and then just make sure that the two widths do not add up over the fixed width of the layout? wouldnt everything just fall into place after that first box was positioned?

 

Thanks guys, I didn't put the h1 (logo part) in a DIV or changed the floats, I just moved the sform (which already floated right) above the h1 tags and changed the CSS to:
#sform {
float:right;
padding-top : 0;
margin-right: 60px;
margin-top : 40px;
position : relative;
width : 380px;
}

Thanks for this, not sure who to thank first...I already offered Stomme money last time he helped me, but didn't want...

 

no money required...i think most of us are here to help eachother

 

Yeah, if people didn't spread knowledge for free I wouldn't know what I know now... I've learned the basics from some books and the rest from forums. At DP the line between helping and doing a service for money is more blurred, but in most other forums it's pretty straighforward-- help is free, and you may or may not get it : )