Hello everyone, I'm currently facing an issue trying to neatly fit a textbox, select menu, and button all within the same sized div. Each element seems to have strange borders/margins causing them not to display properly (the button ends up below the text box and select menu).
Here is the HTML code I am using:
<div class="content">
<div class="search-panel">
<div class="search-panel-logo">
<img src="img.png" class="search-panel-logo-img" />
</div>
<div class="search-panel-searchbar">
<form class="search-panel-frm" action="" id="fsearchbar">
<input class="search-panel-frm" type="text" id="tseachtext" name="tsearchtext" value="Search" />
<select class="search-panel-frm" id="ssearchselect" name="ssearchselect">
<option value="Cars">Cars</option>
</select>
<input class="search-panel-frm" type="button" id="bsearchgo" name="bsearchgo" value="Search!" />
</form>
</div>
</div>
</div>
And here is the CSS:
.content {
background:inherit;
width:950px;
height:600px;
margin: 0 auto;
}
.search-panel {
width:inherit;
height:500px;
background:#093;
margin:0 auto;
}
.search-panel-searchbar {
width:inherit;
height:30px;
}
.search-panel-searchbar-frm {
width:inherit;
height:inherit;
}
.search-panel-searchbar-frm-text {
width:60%;
height:70%;
}
.search-panel-searchbar-frm-select {
width:20%;
height:80%;
}
.search-panel-searchbar-frm-go {
width:20%;
height:80%;
}
I've already tried adding border:0; and margin:0; but it didn't solve the issue. Any suggestions on how I can make all elements appear in one line instead of two?