Question

I would like to create such Div structure

--------div-container-------
----------div-menu----------
--div-title--|--div-submenu-


<div class="div-container">
  <div class="div-menu">
  </div>
  <div class="div-content">
     <div class="div-title"> 
     </div>
     <div class="div-submenu">
     </div> 
  <div>
</div>

The problem is that I do not know how to set div-menu to take the whole row and div-title and div-submenu put on the same row. I have tried to set float:left for div-title and float:right for div-submenu but these divs then takes the space from div-menu.

Answer 1

Div is a block element so it takes entire horizontal space 


And to make two divs come side by side use style "display:inline-block" for "div-title " and "div-menu" .
display:inline-block works for IE7 +/FF

For IE7 and below use below css to behave like inline-block
selector { 
    zoom:1;
   *display:inline;
}