floating divs

[herghost]

Hi all,

 

I am trying to learn some basic css and have run into a problem.

 

Basically I have a header bar, which contains a div for the logo on the left, and a search and link bar in individual divs on the right. The top one is the link bar. However when I add text/links to the bar, it pushes the search bar towards the left.

 

Here is my html

<div id="header">
<div id="logo">
	<a href="index.php"><img src="images/logo.png" width="240" height="100" alt="Buy2Earn Logo" /></a>
   		<div id="myaccount">
        	<p>This is a link</p>
         </div> 
        
		<div id="searchwrapper">
	  		<div id="searchwrapper2">
	    	<form action="">
	      	<input type="text" class="searchbox" name="s2" value="search company or website" />
	      	<input type="image" src="images/search_go.png" class="searchbox_submit" value="" />
        	</form>
      		</div>
		</div>
</div></div>

 

and the relevant css

#header {
width: 1000px;
margin: 0 auto;
height: 150px;
}

/* Header */

#logo {
width: 1000px;
height: 140px;
margin: 0 auto;
padding: 10px 0 0 0;
background-color: #FFF;
}

#logo h1, #logo p {
float: left;
margin: 0;
color: #8C0209;
}

#logo span {
color: #000000;
}

#logo h1 {
padding: 15px 0 0 0;
letter-spacing: -1px;
text-transform: lowercase;
font-weight: normal;
font-size: 3em;
}

#logo p {
text-transform: uppercase;
padding: 0;
font-size: 10px;
color: #110E0F;
}

#logo a {
border: none;
text-decoration: none;
color: #8C0209;
}

/* Search Bar */

#searchwrapper {
width:450px;
height:60px;
background-image:url(../images/search.png);
background-repeat:no-repeat;
padding:0;
margin:60px 0 0 0;
position:relative; /*important*/
float:right;
}
#searchwrapper a{
border:none;
}

#searchwrapper form { display:inline ; }



.searchbox {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:7px;
left:15px;
width:370px;
height:35px;
}

#myaccount {
width:auto;
height:30px;
margin:0 0 0 0;
float:right;
}

.searchbox_submit {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:4px;
left:400px;
width:49px;
height:49px;
}

 

Whats causing this and how do I fix it?

 

Many Thanks

 

 

[Colton.Wagner]

Here is the problem if you want the logo and the link bar to be on the same line and have the logo on the left and the link bar on the right you must make sure that the logo does not take up all of the space in the header as far as width goes. You have the logo set to be 1000px and the header to be 1000px where is the search bar supposed to fit in there? if you want the search bar to float right on the next line then use:

 

clear: left;
float: right;

 

If you want the search bar to be in the logo which is very common you must set the search bar div inside the logo div and align it within those constraints. If you could be a little bit more descriptive on what you want done I could be more help.

Thanks,

Colton Wagner