Home/ Questions/Q 9258569
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T12:26:22+00:00

Example code is here http://jsfiddle.net/BLrKd/ . If you shorten the page horizontally the search

  • 0

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;*/
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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)

    • 0