div inside div - width problem

Question

I am having a div inside another div like this:

<div class="navigation"> <!-- this div must be a single row -->

   <div class="navigationButtons">
   </div>

   <div class="feedback">
 <div id="screenInfo" class="screenInfo">
  PAGE_NUMBER_CANNOT_BE_LESS_THAN_ONE  
 </div>
   </div>

   <div class="pagination">
   </div>

</div>

css classes

div.navigation { height: 25px; }  
div.navigation div.navigationButtons { width: 13%; float: left; }
div.navigation div.feedback{ margin-left: 15%; margin-right: 12em; overflow: hidden; }
div.navigation div.paging { float: right; margin-right: 0.5em; width: 11em; }
div.screenInfo { border-bottom:1px solid #FFDBBD; border-top:1px solid #FFDBBD; margin:0em 0em 1em; width:71.8em; }

Here "screeninfo" has width of 71.8em but I want "feedback" to fill inside the width available between the margins(which might be less than 71.8).
But even after setting the overflow as hidden, I am not able to get the "navigation" div in a single row.

Thanks in advance.

Answer 1

overflow:hidden creates a new formatting context, which means your div will fit between floating elements.

So you can remove margins for div.feedback.