html - css float:left with position left -

why not work? have assigned bunch of divs float:left , want set position of first element's position , have of siblings position update it.

for example set first element's css left:50px. expecting siblings shift not, stay in position relative parent.

<style type="text/css">     .wrap {margin:10px; width:auto; height:70px; background:#ccc; position:relative;}     .floater {width:50px; height:50px; float:left; background:blue; margin:10px 0px 0px 10px; position:relative; left:10px;} </style>  <div class="wrap">     <div class="floater" style="left:50px; background:red"></div>     <div class="floater"></div>     <div class="floater"></div>     <div class="floater"></div>                              </div> 

i noticed if use margin-left behavior want not want use margin-left because need query current position of divs time time.

any thoughts on how achieve want? thanks.

jacob

this correct rendering left -- left property intended use position, adjust positioning of given element without affecting else around it.

typically you'd use left, right, top , bottom create fixed layout group of elements. each of them position:relative; (or absolute or fixed) , have own positioning place them relative parent element, not relative each other.

this quite @ odds concept of float, elements positioned relative each other.

two solutions come mind want:

1) put padding-left:50px; on container wrap div element instead of left:50px; on floated element have it.

2) use display:inline-block; instead of float:left;. tends make layout work easier floats. prefer inline-block solution, because find floats quite painful work sometimes, when want fine-tune layout.

see jsfiddle examples: http://jsfiddle.net/xgkbc/