Text, Logo, and Search all in Header (SOLVED)

[Candace]

I have the logo, text, and search appearing in my header; however, the logo has been bumped too far down and I cannot get it to line up correctly.  Can you please tell me what I am doing wrong?  THANK YOU!

Website:
http://www.quuf.org


Here is my CSS for the header:


div#header {
  background-image: url(images/cms/bg_header.jpg);
  background-repeat:repeat-x;
  width:100%;
height: 120px;  
     
}

div#header h1 {
  background-image: url(images/cms/logo.jpg);
  background-repeat:no-repeat;
  background-position:top left;
  display: block;
height: 120px;  
  }

div#header h1 a {
   background-image: url(images/cms/logo.jpg);
  background-repeat:no-repeat;
  background-position:top left;
  display: block;
height: 120px;  
   text-indent: -999em;
  text-decoration:none;
}

div#header h1 a:hover {
  background:none;
}

div#logotext {
color:696d6;
text-align:center;
padding-top:  40px;

}


div#search {
  float: right;
  width: 27em;    
  text-align: right;
  margin: 0 1em;
  white-space:nowrap;
}

[Peciura]

div#header {
   background-image: url(images/cms/bg_header.jpg);
   background-repeat:repeat-x;
   width:100%;
   height: 120px;
   position: relative;  
     
}

div#header h1 {
   background-image: url(images/cms/logo.jpg);
   background-repeat:no-repeat;
   background-position:top left;
   display: block;
   height: 120px;
   width: 324px; 
   position:absolute;
   top:0;
   left: 0;
   }

div#header h1 a {
    background-image: url(images/cms/logo.jpg);
   background-repeat:no-repeat;
   background-position:top left;
   display: block;
height: 120px;   
    text-indent: -999em;
   text-decoration:none;
}

div#header h1 a:hover {
   background:none;
}

div#logotext {
color:696d6;
text-align:center;
padding-top:  40px;

}

[owr_bgld]

I think the floating could also (with some other changes) bring the same result:

your html-code (without the texts in divs) with my comments

     
        logotext...
     

     
       
     

// in my opinion, this could be set in an div - the div then should be before the logotext-div
linktext...
   




// I don't think that this should be there ?
   

So if you set the logo in an div (you can make this div before the logo text) and work with float:left in each of the divs in the header this should work. maybe you also need to set the margin-left for the logotext-div and search-div.

float: left // for div#headerlogo (the new div with the link), div#logotext
float: right // for the div#search (maybe this has to be the first div in the header then)
margin: 0 auto // position ov div#logotext
you also have to change the margin for the search-tag (because the top-margin has to be set

width: div#search and div#headerlogo should have the same width so that the div#logo allwas is in the middle

[Candace]

THANK YOU!  I used the solution from the first reply and it worked!

[owr_bgld]

the only difference is how the divs are displayed, when the user makes the window of the browser smaller (sorry i don't know the real english expression for it) and that in this way the search-div is shown under your logotext