Reputation: 1983
Right now the code is doing what I want it to do. Multiple divs on the same line. But on each element I am using "float:left" and I don't think this is good practice, nor do I want to use it. I did try using display:inline-block but it still put my 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(https://i.sstatic.net/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>
Upvotes: 1
Views: 1598
Reputation: 688
Changes made
replaced
float: left
With
display: inline-block
vertical-align: middle
Upvotes: 1
Reputation: 46
Tried display: inline-block;
and it looks good for me, also added vertical-align: middle;
to align items. Try this
.ui-topsubbanner-wrapper > div {
float: none;
display: inline-block;
vertical-align: middle;
}
Upvotes: 3