positioning - CSS: aligning elements inside a div -

i have div contains 3 elements, , having problems correctly positioning last one. div @ left has @ left, 1 in middle needs centered, , third 1 needs to right.

so, have like:

#left-element {     margin-left: 9px;     margin-top: 3px;     float:left;     width: 13px; }  #middle-element {     margin:0 auto;     text-align: center;     width: 300px; }  #right-element {     float:right;     width: 100px; } 

my html looks this:

   <div id="container-div">         <div id="left-element">             <img src="images/left_element.png" alt="left"/>         </div>         <div id="middle-element">             text inside middle element         </div>         <div id="right-element">             text in right element         </div>     </div> 

any ideas?

thanks!

you haven't included css container div, whenever contains floating elements should hide overflow so:

#container {   overflow: hidden;   width: 100%; /* measure */ } 

when position middle div setting margins span entire container, further elements getting positioned on line below. note, @ least modern browsers, further. if reorder elements, so:

<div id="container">     <div id="left-element">         <img src="images/left_element.png" alt="left"/>     </div>     <div id="right-element">         text in right element     </div>     <div id="middle-element">         text inside middle element     </div> </div> 

you should find works. better method, i'm not quite sure whether supposed work, use css positioning. apply following css:

#container {   overflow: hidden;   width: 100%;   min-height: 36px; /* remember absolute positioning outside page flow! */   position: relative; } #left-element {   position: absolute;   left: 9px;   top: 3px;   width: 13px; } #middle-element {   margin: 0 auto;   text-align: center;   width: 300px; } #right-element {   position: absolute;   right: 0px;   top: 0px;   width: 100px; }