html - Positioning and size of a strange div -

i had problem seems simple enough solve can not understand.

i creating style swicher , therefore have included list different colors , div colorswicher connected plugin. not understand why, despite div after list, appears first. , considering size, has width of proportion.

how can insert after other? , of understand why has effect ..

thanks in advance

the html is

<div id="option">     <ul>         <li id="blue" class="color"></li>         <li id="red"class="color"></li>         <li id="yellow" class="color"></li>     </ul>     <div id="colorselector"><div></div></div> </div> 

the css

#colorselector { position: relative; max-width: 36px; height: 36px; background: url(../images/select.png); }  #colorselector div { position: absolute; top: 3px; left: 3px; width: 30px; height: 30px; background: url(../images/select.png) center; } 

for code : http://jsfiddle.net/zh3sl/

i added div same id show how width involves whole screen though set 36px

i tried eliminate position, result not best

i hope can understand , can me.

again, in advance

assuming li's floated left , ul not clearing floats, how putting overflow:hidden on ul?

also, position absolute on #colorselector not doing favours. either float too, or leave display block (no float or position absolute).