CODEWITHSUNDEEP
htmlcsscss-positionline-breaks
tristam
tristam

Reputation: 11

Horizontal Align Search Bar and Button

I was really struggling with this issue...

I've got 6 linear buttons as a navigation and a search bar after them. All I need to keep them on the same like and make a search bar liquid. But the search bar always breaks a line.

I've tried so many ways to fix it. I know some solutions as using "cacl" or wrap them inside a table but I need some normal way to do it and make a responsive my search bar.

I would be really glad if someone will explain to me what is wrong.

Thank you.

    <div class="navigation">          
                <button id="navigation-buttons">Sales</button>
                <button id="navigation-buttons">HR</button>
                <button id="navigation-buttons">OVP</button>

            <form action="#" method="get" class="search-box">
                <input type="search" />
            </form>
    </div>
<style>
    input {

    display: inline; 
    height: 31px;
    width: 100%;

    }

    .search-box {

    display: inline;

    }

    div.navigation { 

    margin: 0 0 15px 0;
    width: 100%;
    background-color: yellow;
    display: inline;

    }

    button#navigation-buttons {

    background-color: #000099;
    border: 0px;
    color: white;
    padding: 10px 15px; 
    text-align: center;
    display: inline;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
</style>

Upvotes: 1

Views: 3488

Answers (4)

partypete25
partypete25

Reputation: 4413

If I understand correctly, not only do you want the buttons and the search field to occupy the same row, you also want the search field to take up all the remaining width?

If that is correct here is what you have to do:

1) Apply a table like layout but setting .navigation to display:table and adding two inner .col divs and setting them to display:table-cell

2) Set your first inner .col div to have a width:0 and the other width:100%

3) Add white-space:nowrap to your .navigation

Working example: http://codepen.io/partypete25/pen/LGLzMw

Upvotes: 0

Dipali chag
Dipali chag

Reputation: 1

Replace style sheet like below..

input {

display: inline; 
height: 31px;
width: 100%;

}

.search-box {

display: inline-block;

}

div.navigation { 

margin: 0 0 15px 0;
width: 100%;
background-color: yellow;
display: inline;

}

button#navigation-buttons {

background-color: #000099;
border: 0px;
color: white;
padding: 10px 15px; 
text-align: center;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;

}

Upvotes: 0

Maihan Nijat
Maihan Nijat

Reputation: 9344

For displaying all in the same line, use the following:

.search-box {
  display: inline;    
}

And if you want to keep it always in the same line, even when the screen size is changed, then also use the code provided by Lalji Tadhani in his answer.

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

Add white-space: nowrap; this class div.navigation

div.navigation {
    background-color: yellow;
    display: inline;
    margin: 0 0 15px;
    white-space: nowrap;
    width: 100%;
}

Upvotes: 1

Related Questions