html - Floated div to fill remainder space -

-

i have codepen set here: http://codepen.io/anon/pen/isqou

div.linksbox { border:1px solid #a9a9a9; background:#fff; -moz-box-shadow:0 5px 12px rgba(0,0,0,0.3); -webkit-box-shadow:0 5px 12px rgba(0,0,0,0.3); box-shadow:0 5px 12px rgba(0,0,0,0.3); margin:0 12px 12px 0;  text-align:center; overflow:hidden; }  <div id="topfloats" style="margin-top:5px; overflow:hidden; border:1px solid black; margin-top: 10px;">     <div style="width:20px; height:340px; float:left; background-color:red;"></div>     <div id="rightfloatwrapper" class="linksbox">         <div class="rollover linkiconlayout" id="" style='width: 134px; height: 122px; background-color:green;' href=""></div>         <div class="rollover linkiconlayout" id="" style='width: 142px; height: 112px; background-color:blue;' href=""</div>     </div> </div>

an image in red (left) floated div sets height of black-bordered div. need inner (drop-shadowed) div (whose minimum dimensions set size of it's content divs) expand fill remainder of space in black-bordered div.

i able fill horizontal space taking float off drop-shadowed div, adding overflow, , setting margins accommodate drop-shadow. how can fill remaining vertical space?

solved. ended up abandoning floats , using position:absolute;right:0; bottom:0;top:0; on inner (drop-shadowed) div. trick use right:5% , set (previously floated) red div width same (width:5%). accomplished attempting floated divs , still keeps flexibility of liquid layout (with small downside if change width, need make sure change right:property well).

hopefully else tries this.

cheers!


Comments

Post a Comment

Popular posts from this blog

javascript - how to protect a flash video from refresh？ -

-
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>flash video refresh</title> </head> <body> <div id="playerzone"><embed height="496" width="580" flashvars="flvid=19742822&amp;createtime=2012-4-19 13:46:33" wmode="opaque" allowscriptaccess="always" allowfullscreen="true" quality="high" bgcolor="#000000" name="player" id="player" src="swf/mine.swf" type="application/x-shockwave-flash"></div> <a onclick="return test();" id="test">click me popup div,and hide scrollbar</a> </body> the code upon： for example,when click a#test button,popup div,it's no problem,but want hide scrollbar while div popup. i used $('html').css('overflow','hidden') in
Read more

android - Associate same looper with different threads -

-
Image
in application, want create multiple threads working on single queue. create queue know need call looper.prepare() . i want other threads create should associated looper created first thread, how can achieve this? use 1 of java thread safe queue class java.util.concurrent package instead of looper achieve goal. it's more common practice. share queue between threads , post task queue entry 1 thread can entry thread. blockingqueue can - in 1 thread call take() , block thread until thread put() entry queue. that's all. producer consumer pattern example blockingqueue or concurrentlinkedqueue about blockingqueue
Read more

visual studio 2010 - Connect to informix database windows form application -

-
i trying figure out how connect ibm informix database. have been doing research , have found threads 5 years ago examples not working. i have installed latest sdk ibm informix. i have included ibm.data.informix.dll references in project. i have included using ibm.data.informix; i adding button , on click testing conenction. debug error "sql0035n file "c:\users\adam\documents\visual studio 2010\projects\test\test\msg\en_us\db2nmp.xml" cannot opened." this file not exist , dont see anywhere in program files (x86)\ibm informix client sdk directory. my on click code is private void button1_click(object sender, eventargs e) { const string host = "192.168.obfuscated"; const string servicenum = "1525"; //port? const string server = "serverobfuscated"; const string database = "dbobfuscatedy"; const string user = "myusername"; const string password = &
Read more