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/


Comments

Post a Comment

Popular posts from this blog

c++ - Is it possible to compile a VST on linux? -

for class project i'm attempting write vst plugin backed cuda. current cuda workflow on linux box, i'd prefer compile , link there. according wikipedia , should possible (i couldn't find steinberg documentation relevant linux) can't find makefile or instructions on how build if aren't using xcode or visual studio. i'm vst 3 sdk doesn't support linux. when try compile plugin under linux, error: ./base/source/fatomic.cpp:39:30: fatal error: libkern/osatomic.h: no such file or directory this issue caused following code in "vst3 sdk/base/source/fatomic.cpp" #if mac #include <libkern/osatomic.h> #if mac_os_x_version_min_required > mac_os_x_version_10_4 #define native_atomic_type (volatile int32_t*) #else #define native_atomic_type (int32_t*) #endif #elif windows #include <windows.h> #endif but hope compiling under linux work vst sdk 2.4. reading. jvstwrapper seems run on lin...
Read more

c# - SharpSVN - How to get the previous revision? -

i trying find efficient way previous revision of file text comparison using sharpsvn. using (svnclient c = new svnclient()) { c.authentication.defaultcredentials = new networkcredential( configurationmanager.appsettings.get("svnserviceusername") , configurationmanager.appsettings.get("svnservicepassword") , configurationmanager.appsettings.get("svnservicedomain") ); c.authentication.sslservertrusthandlers += new eventhandler<svnsslservertrusteventargs>(authentication_sslservertrusthandlers); collection<svnfileversioneventargs> fileversioncollection = new collection<svnfileversioneventargs>(); svnrevisionrange range = new svnrevisionrange(0, this.hooks.revision); svnfileversionsargs args = new svnfileversionsargs(); args.retrieveproperties = true; args.range = range; foreach (svnchangeitem item in log.changedpaths) { string path = this.repositorypath + it...
Read more

php cli reading files and how to fix it? -

while using php cli in ubuntu got apache web server cant read file can while using in browser. , error shows nothing , next used code testing purposes : <? $handle = fopen("testfile.txt", "r"); if ($handle) { while (($buffer = fgets($handle, 4096)) !== false) { echo $buffer; } if (!feof($handle)) { echo "error: unexpected fgets() fail\n"; } if(!is_readable($handle) { die("not readable"); } fclose($handle); } ?> how fix ? edit : after removing '@' before fopen got following error fopen(testfile.txt): failed open stream: no such file or directory in /var/www/log/ka.php on line 2 when run script through cli, uses shell's working directory, in opposition file's directory (which apache hands current directory). important you, since fopen call depends on relative path; , relative paths resolved relatively working directory, not script. to have script behave apache, eit...
Read more