Question

OK guys, here’s my problem. I have a navigation bar on my website, which can be customized by the administrator of the site – he can add links to the navigation bar, so that list has dynamic width. At the right corner of the bar, I have a div element with a search box. These are the CSS properties of these two divs:

.head_navigation
{
    float:left;
    height:51px;
    padding-top:7px;
    margin:0;
    border:0;
    background:url("images/top_nav_bckg.gif") repeat-x bottom;
    text-align: center;
}

.head_navigation_right{
    float:right;
    border:0;
    margin:0;
    padding:0;
    padding-top:7px;
    height:51px;
    background:url("images/top_nav_bckg_right.gif") repeat-x bottom;
    text-align:right;
}

I can’t make the right div fill the blank space to its left side. Since the left div is dynamic, I can’t set a fixed margin for the right one. I also tried:

width: 100%;

and it puts the right div to the row below and fills the whole page. Any help?

Answer 1

http://jsfiddle.net/Zx9gw/1/

From head_navigation_right remove the float property.

.head_navigation_right{
    border:0;
    margin:0;
    padding:0;
    padding-top:7px;
    height:51px;
    background:url("images/top_nav_bckg_right.gif") repeat-x bottom;
    text-align:right;
}​

Unfortunately I can’t tell you why this is, I can just assume: float changes the display of an element, so that any other elements would take the rest of the space.