Break efter div - skal fjernes

Jeg har en samlet struktur der ser ud som følgende;
------------------------------------------------
<div id="wrapper">

<div id="header"></div>

<div id="menu_container">
<div id="menu_left"></div>
<div id="menubg">mnidt</div>
<div id="menu_right">ss</div>
</div>

<div id="menu_end"></div>

<div id="head_container">
<div id="head_left">l</div>
<div id="headbg">mnidt</div>
<div id="head_right">ss</div>
</div>


</div>
------------------------------------------------

Problemet opstår efter "<div id="menu_end"></div>" hvor der kommer et uønsket break.
jeg vil gerne ha' at <div id="head_container"> ligger sig lige under menu_end uden nogen pixels imellem (som var det cellspacing / padding = 0 - i tabel struktur)

Jeg prøvede at gøre følgende;
"<div id="menu_end" style="display: inline;"></div>"
Hvilket faktisk gav det rigtige resultat og eliminerede det uønskede break, men selve det background-image som er defineret i #menu_end, vil så ikke vises... Og nu er jeg løbet tør for ideer! :(

Alle bidrag er velkomne. På forhånd tak..!

CSS'en fra #menu_end og nedefter;
------------------------------------------------
#menu_end {
    background-image: url(images/menu_end.gif);
    background-repeat: no-repeat;
    width: 806px;
    height: 8px;
}

#head_container {
    width: 400px;
    height: 31px;
}

#head_container *{
    float: left;
    height: 31px;
    margin: 0px;
    text-align: center;
}

#head_left {
    background-image: url(images/head_left.gif);
    width: 15px;
    background-repeat: no-repeat;
}

#headbg {
    background-image: url(images/head_bg.gif);
    width: 300px;
    background-repeat: repeat;
}

#head_right {
    background-image: url(images/head_right.gif);
    width: 15px;
    background-repeat: no-repeat;
}
------------------------------------------------