Margin-bottom problem[please help]

HTML & CSS
1

Hello every one, I just joined to this forum:)
And i have one question:
I just started coding a website but I found problem in header;After I insert 3 buttons and logo to the header I couldn’t insert any other element next to the logo(opposite of it)
[I tried clear:both and right and left and I thought I should just use margin bottom but it doesn’t work]
Pleas help:)
And here is m html code:

<!doctype html>
<html>
<head>
<link href="_CSS/style.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<title>&#1576;&#1607; &#1711;&#1740;&#1604;&#1583; &#1585;&#1601; &#1575;&#1601; &#1575;&#1604;&#1575;&#1740;&#1606;&#1587; &#1582;&#1608;&#1588; &#1575;&#1605;&#1583;&#1740;&#1583;</title>
<meta name="description" content="One of the best guilds in persian server "jahan games" Is wrath of the alliance"/>
<meta name="keywords" content="Best persian guild, Jahan games, wrath of the alliance, world of warcraft, WOW tips, WOW level up tips"/>

</head>
<body>
<div id="main">
<header>
	
			<a href="#home" ><img id="home" src="_Images/Button 1.jpg" width="60" height="37" alt="Home"> </a>
					<a href="#about"> <img id="about"src="_Images/Button 2.jpg" width="96" height="36" alt="about"> </a>
	   	<a href="#rules"> <img id="rules"src="_Images/Button 3.jpg" width="130" height="36" alt="Rules"></a>
		<img id="logo" src="_Images/Logo.png" width="353" height="154" alt="Wrath of the alliance logo"></header>

		<input type="text" name="search" id="search">
		<label for="search"></label>
</div>
</body>
</html>

And here is CSS code
/* CSS Document */

body{
	background-color:#EFEFEF;
	height:1100px
	

}
header{
	background-image: url(../_Images/Header_bg.png);
	height: 240px;
	margin: auto;
	width: 850px;
}
#search {
	float: right;
	margin-bottom: 150px;
}
#logo{
	margin-top: 65px;
	margin-left: 50px;
	clear: right;
	
	
	
}

#main{
	width: 850px;
	margin: auto;
	height: 1100px;
}
#rules {
	float: right;
	margin-right: 10px;
}
#about {
	margin-right: 10px;
	float: right;
}
#home {
	float: right;
	margin-right: 5px;
	clear: right;
}
2

I changed

<img id="logo" src="_Images/Logo.png" width="353" height="154" alt="Wrath of the alliance logo"></header>

		<input type="text" name="search" id="search">
		<label for="search"></label>

to

<img id="logo" src="_Images/Logo.png" width="353" height="154" alt="Wrath of the alliance logo">

		<input type="text" name="search" id="search">
		<label for="search"></label>
</header>

But didn’t worked

3

Hi l-hcdf,

It’s not totally clear what the issue is, but the bottom margin here will prevent anything from sitting right next to the logo:

#search {
float: right;
[COLOR="#FF0000"]margin-bottom: 150px;[/COLOR]
}

Could you post an image of how you want the header organized?

4