CODEWITHSUNDEEP
htmlcssforms
Jizbo Jonez
Jizbo Jonez

Reputation: 1290

Search input and button not aligning horizontally properly

I am trying to align a form text input and button horizontally on the same line while giving the button a minimum width for a responsive layout. For some reason the minimum width forces the button on to a new line

.search-container{
    width:100%;
    border: 1px solid #000;
    display:block;
 }
.search-text-container {
    width:90%;
    display:inline-block;
}

.search-text-container input {
    width:100%;
    height:30px;
}

.round-icon-container {
    width:10%;
    display:inline-block;
}
.round-icon-button {
    min-width:30px;
    display:block;
    width:30px;
    height:30px;
    line-height:normal;
    border: 2px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    background: #464646;
    box-shadow: 0 0 3px gray;
    font-weight:bold;
}
.round-icon-button:hover {
    background: #262626;
}

<div class="search-container">
    <span class="search-text-container">
        <form action="">
            <input type="text" name="fname" />
        </form>
    </span>
    <span class="round-icon-container">
        <button type="submit" class="round-icon-button">
            <i class="fa fa-search"></i>
        </button>
    </span>
</div>

I have a fiddle here of what I am working on http://jsfiddle.net/dnssmw83/19/ any help would be much appreciated

Upvotes: 2

Views: 615

Answers (1)

Anonymous
Anonymous

Reputation: 10216

You could achieve it by using CSS @media queries like this:

JSFiddle - DEMO

* {
    box-sizing:border-box;
}
@media(max-width:320px) {
    .search-text-container {
        width:70% !important;
    }
    .round-icon-container {
        width:30% !important;
    }
}
.search-container {
    width:100%;
    border: 1px solid #000;
    display:block;
    font-size: 0; /* to remove the space between inline-block elements */
}
.search-container > span {
    font-size: 16px; /* add the font-size to child span elements */
    vertical-align: middle;
}

Upvotes: 1

Related Questions