Seeking Help Regarding Search Box in HTML

Community Off Topic
1

<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
CSS Styling
<In what way does your code behave incorrectly? Include ALL error messages.>
The search button is appearing on the left side of the search box; but, I’m trying to put it on the right side.

Thanks for your help!



<div id="wrapper">
			<div id="callout">
				<p>
					<input type="text" placeholder="Search" id="search-text-input"/>
					<div id="button-holder">
					<img src="search-magnifying-glass-128.png"/>
				</p>
					<style>
						#search-text-input {
							border-top: thin solid #e5e5e5;
							border-right: thin solid #e5e5e5;
							border-bottom:0;
							border-left: thin solid #e5e5e5;
							box-shadow:0px 1px 1px 1px #e5e5e5;
							float:right;
							height:17px;
							margin: .8em 0 0 .5em;
							outline:0;
							padding: .4em 0 .4em .6em;
							width:183px;
}
						#button-holder {
							background-color:#ffffff;
							border-top: thin solid #e5e5e5;
							box-shadow:1px 1px 1px 1px #e5e5e5;
							cursor:pointer;
							float:right;
							height:27px;
							margin:8px 0 0 0;
							text-align:center;
							width:50px;
}
						#button-holder img {
							margin:4px;
							width:20px;
}
					</style>
2

I’m not exactly sure what is what, but I can tell you that both the #search-text-input and the #button-holder are both on float: right, so you should probably change one of them. When using the float property, the elements know that the others are there, and do not land on top of each other. I hope this will help you!