i have been attempting solve phenomina using style="overflow: hidden; padding-right: .5em;". search button still appears @ bottom left , creates "l" shape. if has ideas why happens help
#searchbartop{ margin:auto; vertical-align:middle; position:absolute; margin-left:25%; } #searchbartoptext{ width:600%; }<form id="searchbartop"> <input type="text" placeholder="search..." id="searchbartoptext" style="overflow: hidden; padding-right: .5em;" required> <input type="button" style="width: auto;" value="search"> </form>
you can try this: demo
#searchbartop { margin:auto; vertical-align:middle; margin-left:25%; width:75%; } #searchbartop input[type=text] { width:70%; padding-right: .5em; display:block; float:left; } #searchbartop input[type=button] { width:20%; display:block; float:left; } html:
<form id="searchbartop"> <input type="text" placeholder="search..." required/> <input type="button" value="search" /> </form> 