Question

I am trying to keep elements in header in one row. My current styles working but one problem is when I make my browser smaller or squeeze it (from right to left) then at one point the search element goes to second row or appear beneath the first row(which is menu row). And when I make it more smaller then whole menu div tag goes to second row and appears beneath logo.

What I want is when I make my browser smaller then all these elements should remain in the same row. How can I do this?

Here is my code

.header
.logo
.menu
    %ul
        %li
            %a{:href => '#', :rel => 'first'} Home
        %li
            %a{:href => '#', :rel => 'first'} Features
        %li
            %a{:href => '#', :rel => 'first'} Pricing
        %li
            %a{:href => '#', :rel => 'first'} Team
        %li
            %a{:href => '#', :rel => 'first'} Support
        %a{:href => '#', :rel => 'first'}
            %li.last Sign up for beta   
        .clear
.search
    %input{:type => 'text', :name => 'search'}
.clear

here is scss

.header-container {
width: 100%;
height: 100px;
}

.clear { clear: both; }

.header-container {
width: 100%;
background: url(menu-bg.jpg) no-repeat;
background-size: 100%;

.header {
    padding: 30px 100px;
    width: 68%;
    margin: 0 auto;

    .logo {
        width: 122px; height: 31px;
        margin-right: 10px;
        float: left;
        background: url(logo.png) no-repeat;
    }

    .menu {
        min-width: 500px;
        float: left;

        ul {
            line-height: 5px;
            list-style-type: none;

            li {
                float: left;
                margin-right: 25px;

                a {
                    color: #ffffff;
                    text-decoration: none;
                    font-size: 16px;
                }

                a:hover {
                    background: url(selected.jpg) no-repeat;
                }

                &.last {
                    color: #ffffff;
                    width: 148px; height: 38px;
                    margin-top: -16px;
                    padding: 16px 18px;
                    background: url(buttonbg.jpg) no-repeat;
                }
            }

        }
    }

    .search {

        input {
            width: 200px;
            float: right;
            padding: 5px;
            color: #ffffff;
            background-color: #2c3338;
            border: 1px solid #2c3338;
            background: url(search.png) no-repeat 98%;

        }

    }
}
}

Answer 1

Apply min-width on body tag and check hope with this problem solved.

body
{
   min-width:1000px;
}