html - Float in CSS causing element to move down -
<html> <head> <title>my play store</title> <style type="text/css"> body{ margin:0; } #container{ min-width:1080px; } #upperbar{ background-color:#f1f1f1; height:60px; width:100%; } #logobardiv{ margin:10px 20px 10px 30px; float:left; } #logo{ height:39px; width:183px; } #searchbardiv{ float:left; padding:15px 0px 15px 10px; } #searchbar{ height:28px; width:545px; font-size:1em; } </style> </head> <body> <div class="container"> <div id="upperbar"> <div id="logobardiv"> <img id="logo" src="images/logo.png"/> </div> <div id="searchbardiv"> <input id="searchbar" type="text" placeholder="search"/> </div> </div> </div> </body> in above page trying make,the "searchbardiv" tends move below "logobardiv" when reduce size of browser window.
i want want 2 divs in same line.i tried using "float:left",but not giving required result.
instead of using floats, try using display: inline-block 2 child elements , white-space: nowrap keep them both on same line.
apply display: inline-block both #logobardiv , #searchbardiv , apply vertical-align: middle (or other value needed) #logobardiv take care of vertical alignment issues.
finally, apply white-space: nowrap #upperbar keep 2 child elements on same line.
note smaller enough screens, horizontal scrolling. fix this, need make design decision handle situation. make search input width smaller or logo smaller or both, perhaps using % widths instead make them responsive. have few options available solve problem.
body { margin: 0; } #container { min-width: 1080px; } #upperbar { background-color: #f1f1f1; height: 60px; width: 100%; white-space: nowrap; } #logobardiv { margin: 10px 20px 10px 30px; display: inline-block; vertical-align: middle; } #logo { height: 39px; width: 183px; } #searchbardiv { display: inline-block; padding: 15px 0px 15px 10px; } #searchbar { height: 28px; width: 545px; font-size: 1em; }<div class="container"> <div id="upperbar"> <div id="logobardiv"> <img id="logo" src="http://placehold.it/183/39" /> </div> <div id="searchbardiv"> <input id="searchbar" type="text" placeholder="search" /> </div> </div> </div>
Comments
Post a Comment