put images in header (same line) - html

Question

I want to put 3 image's in the header, left is logo and right is search box.
how can I put them in the same line?
I want it so that its the logo on the left of the header and the search box is on the right..
Please help.
#logo {
float: left;
margin-left: 10%;
height: 30%;
width: 20%;
}
#searchlogo {
float: right;
height: 30px;
width: 30px;
margin: 5px;
position: relative;
top: -5px;
}
/*search box*/
input.rounded {
margin-left: 85%;
border: 1px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 2px 2px 3px #666;
-webkit-box-shadow: 2px 2px 3px #666;
box-shadow: 2px 2px 3px #666;
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
padding: 4px 7px;
outline: 0;
-webkit-appearance: none;
}
input.rounded:focus {
border-color: #969063;
}
<header>
<a href="main.html">
<img id="logo" src="logo.gif" />
</a>
<input type="text" class="rounded" />
<input type="image" id="searchlogo" src="searchbutton.png" />
</header>

Answer 1

It's your margin-left:85% rule for the input.rounded class. Any reason why you need margin that is most of the screen width? If you remove that rule, everything lines up in one row.

Answer 2

You need to change the way the elements behave in terms of block and inline.
the below code should achieve what your looking for.
also your margin's where totally out of whack i have removed them from the equation and float.
I've also added a few extra css rules to help you with this kind of thing in the future.
.align {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: top;
}
.align-center {
text-align: center;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.align-table {
display: table;
width: 100%;
table-layout: fixed;
}
.t-align {
display: table-cell;
vertical-align: top;
width: 100%;
}
#logo {
height: 30%;
width: 20%;
}
#searchlogo {
height: 30px;
width: 30px;
margin: 5px;
position: relative;
top: -5px;
}
/*search box*/
input.rounded {
border: 1px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 2px 2px 3px #666;
-webkit-box-shadow: 2px 2px 3px #666;
box-shadow: 2px 2px 3px #666;
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
padding: 4px 7px;
outline: 0;
-webkit-appearance: none;
}
input.rounded:focus {
border-color: #969063;
}
<header class="align-table">
<div class="t-align">
<a href="main.html">
<img id="logo" src="logo.gif" />
</a>
</div>
<div class="t-align align-right">
<form class="align">
<input type="text" class="rounded" />
<input type="image" id="searchlogo" src="searchbutton.png" />
</form>
</div>
</header>