html - How To Wrap A Div When Parent Container Shrinks Using CSS -
i have css issue can't figure out. here markup.
<!doctype html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> .container { position: relative; background-color: purple; padding: 0; margin: 0; } .first { float: left; width: 10%; min-width: 100px; background-color: yellow; } .second { float: left; width: 10%; min-width: 100px; background-color: orange; } .third { float: left; width: 80%; background-color: lime; } .clear { clear: both; } </style> </head> <body> <div class="container"> <div class="first">first</div> <div class="second">second</div> <div class="third">third</div> <div class="clear"></div> </div> </body> </hmtl> the issue i'm having want wrap 3rd div when shrink browser window, have expanded (100%) 1 time wraps new line. i'm close, when 3rd div wraps, 80% property kicks in , doesn't allow expand. i have fiddle ready tweaking here. below images visualize problem. can see in sec image 3rd div isn't 100% expanded when wrapping takes place.
sorry, no pure css solution. utilize jquery...
you want attach event window.resize. caution window.resize refreshes constanstanly, little function needed wait resize remain constant half sec before fire method.
markup
<div> <div id="firstcont" style="float:left; display:inline-block;"> <select></select> <select></select> </div> <div id="secondcont" style="margin-left:80px;"> <input id="note" style="width: 99%;" /><br /> </div> </div> javascript:
$(window).resize(function() { //wait half sec consant resize reading before executing waitforfinalevent(function(){ var $textbox = $("#note"); var textboxwidth = $textbox.width(); //alert(textboxwidth); if(textboxwidth < 400) { //alert("resizing"); $('#firstcont').css('float', 'none'); $('#secondcont').css("margin-left", "0px"); } else { $('#firstcont').css('float', 'left'); $('#secondcont').css("margin-left", "80px"); } }, 500, "some unique string"); }); var waitforfinalevent = (function () { var timers = {}; homecoming function (callback, ms, uniqueid) { if (!uniqueid) { uniqueid = "don't phone call twice without uniqueid"; } if (timers[uniqueid]) { cleartimeout (timers[uniqueid]); } timers[uniqueid] = settimeout(callback, ms); }; })(); see jsfiddle here: http://jsfiddle.net/eastonharvey/nsgf8/2/
html css html5 css3
No comments:
Post a Comment