html - Multiple divs on same line without using float:left on each element -

right code doing want do. multiple divs on same line. on each element using "float:left" , don't think practice, nor want use it. did try using display:inline-block still put divs on new lines.

https://jsfiddle.net/6s7lnw0e/

css:

.ui-topbanner {     color:#000;     height: 31px;     background-color: #f2e9da;     border-bottom: 1px solid #d9cebc; } .ui-topsubbanner {     position:relative;     color:#000;     height: 30px;     background: -webkit-linear-gradient(top, #f7f1e8 0%, #f4ecdf 100%);     border-top: 1px solid #fff;     border-bottom: 1px solid #efe8da; } .ui-topsubbanner-wrapper {     float:left;     height: 30px;     padding:2px 5px 0 5px; } .ui-search-wrapper {     float:left; } .ui-seperator {     float:left;     padding:0 5px;     width:2px;     height:23px;     display:inline-block;     background-image: url(http://i.stack.imgur.com/rmuym.png);     background-position: 5px 3px;     background-repeat: no-repeat; } .ui-button-submit {     float:left;     height:22px;     line-height:22px;     padding:0 7px;     color:#000;     font-size:.7rem;     border-right:1px solid #ddd1b8;     border-bottom:1px solid #ddd1b8;     vertical-align:middle;     background: -webkit-linear-gradient(top, #fff 0%, #fff 50%, #faf7ef 50%, #faf7ef 100%); } .ui-button-submit img{     vertical-align:middle; } .ui-button-text {     padding-left:2px;     vertical-align:middle; } .ui-button-submit:hover {     border-right:1px solid #e5c365;     border-bottom:1px solid #e5c365;     cursor:pointer;     background: -webkit-linear-gradient(top, #fffbef 0%, #fff4d2 50%, #ffe8a6 50%, #ffe8a6 100%); } .input-search {     height:19px;     line-height:19px;     width:300px;     border:1px solid #ddd1b8;     color:#61718c;     padding:0 20px 0 4px;     font-size:.70rem;     font-weight:700;     background-image: url(../images/input_search_bg.png);     background-position: right;     background-repeat: no-repeat; } 

html:

<div class="ui-topsubbanner"> <div class="ui-topsubbanner-wrapper">      <div class="ui-search-wrapper"><input type="text" class="input-search" placeholder="search..."></div>          <div class="ui-seperator"></div>      <div class="ui-button-submit"><img src="http://icons.iconarchive.com/icons/famfamfam/silk/16/page-white-add-icon.png"><span class="ui-button-text"> new track</span></div>          <div class="ui-seperator"></div> </div> </div> 

tried display: inline-block; , looks me, added vertical-align: middle; align items. try this

.ui-topsubbanner-wrapper > div {     float: none;     display: inline-block;     vertical-align: middle; }