CODEWITHSUNDEEP
htmlcss
bab
bab

Reputation: 2169

How to make elements stay within container?

Example code is here http://jsfiddle.net/BLrKd/. If you shorten the page horizontally the search box moves outside of the header at the top of the page. How can I make all the elements stay within the header?

Basically i'm trying to make a header that behaves like stackoverflow. For stackoverflow, if you make the page smaller the header elements stay in the header and don't move up or down.

Here is the code in case jsfiddle isn't working

<body>
    <div id="header">
        <div id="page-nav" >
            <a id="login" href="/login">login</a>
            <form id="search-form" action="search.py" method="get">
                <input id="searchbox" type="text" name="q" placeholder="search"/>
            </form>
        </div>
    </div>
</body>

Here is the css

body {
    margin: 0;
    padding: 0;
}
#header {
    background-color: #015367;
    overflow:hidden;
    height: 50px;
    /*border-style:solid;*/
}

#login {
    color: #b92c2c;
    font-size: 1.25em;
    float: left;
    margin-left: 10em;
    margin-top: 16px;
    text-decoration: none;
    /*border-style:solid;*/
}
#page-nav
{
    float: right;
    margin-right: 13em;
    /*border-style:solid;*/
    /*border-color:white;*/
}

#search-form {
    float: right;
    margin-left: 0.5em;
    margin-right: 1em;
    margin-top: 16px;
    /*border-style:solid;*/
    /*border-color:yellow;*/
}

Upvotes: 1

Views: 3235

Answers (1)

nice ass
nice ass

Reputation: 16709

Just specify a minimum width:

#header{
  min-width: 720px;  /* or whatever the size of the content is */
}

(and remove the overflow property, it's not needed)

Upvotes: 3

Related Questions