Question

how can i stop my right floated div from overflowing into another div on it’s left?

<div class="HeaderArea">

   <div id="centertopnav">
   </div>

   <div class="srchbox">
   </div>

</div>

#centertopnav {margin:0 auto; padding:0; width:780px;}

.srchbox { 
 float:right; 
 margin:-20px 290px 0 0 ;
}

HeaderArea is full body width, centertopnav is centered using margin “0px auto” and
srchbox is floated right but as i resize window, srchbox shifts into the centertopnav..

what property do I use to fix this? Overflow? clear?
here is screeshot: http://pixholder.com/view.php?id=1160

Answer 1

What’s HeaderArea width? If it’s to small srchbox will floating right but can’t go any further.