The best way for positioning header elements?

Question

I have a div header with position:fixed which has logo, menu and search option inside. Logo is positioned on the left, menu in the middle and search on the right, logo and menu have relative positions, while search has position:absolute.

Now, here comes the problem. When I resize my browser window, the search div stays on fixed distance from the top right corner of browser window, and then when I resize it more, it overlaps with menu div and pushes it down.

I'm not sure whats the problem, but I would like to have the following: I want my header to be on the top, but when I resize the window I don't want the search and menu to move, I just want them not to move, and if the window is resized over them, they shouldn't be seen.

So what is the best way to do this? Keep the header div fixed and position other divs absolute, or relative, or something third?

jsfiddle

Solution 1

It isn't acting like fixed, it's acting like absolute. fixed deals with the window scrolling, not with it resizing. Your css is as follows:

#tr_corner {
    position:absolute;
    top:10px;    
    right:20px;    
}

By saying right: 20px, you are setting the element to stay 20px from the right border of it's nearest positioned ancestor. This will be maintained when the window resizes. If you don't want it to move when the window is resized, perhaps you can position it from the left side instead of right.

Solution 2

Give your #nav_top a defined width instead of 100%. If your nav_top has to have a width of 100% you'll need to wrap your search and menu in a div with a defined width.

See this-

#nav_top{
    height:75px;
    width:100%;
    background:blue;
    position:fixed;
    top:0px;
    left:0px;
}

#logo{
    width:50px;
    height:75px;
    float:left;
    background:yellow;
}
#wrapper{
    width:800px;
    border:1px solid red;
    height:50px;
    left:200px;
    position:relative;
}
#menu{
    float:left;
    background:pink;
}

#search{
    float:right;
    background:green;
}

<div style="height:75px;width:100%;background:blue;position:fixed;top:0px;left:0px;">
    <div id="logo">logo</div>
    <div id="wrapper">
        <div id="menu">my menu</div>
        <div id="search">search</div>
    </div>
</div>