CODEWITHSUNDEEP
htmlcss
Hardist
Hardist

Reputation: 1983

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

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

Answers (2)

Sai Deepak
Sai Deepak

Reputation: 688

Refer Fiddle :

Changes made

replaced 

float: left

With

display: inline-block 
vertical-align: middle

Upvotes: 1

timon
timon

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

Related Questions