beennn Posted April 4, 2014 Share Posted April 4, 2014 (edited) Currently I have: However, I'm after: Using: .expandable_window { float:left; margin-top: 20px; margin-bottom: 20px; margin-left:20px; max-width:46%; background: linear-gradient(white, c8c8c8); box-shadow: 10px 10px 5px #888888; } Any help is much appreciated. Edited April 4, 2014 by beennn Link to comment Share on other sites More sharing options...
davej Posted April 4, 2014 Share Posted April 4, 2014 Put the two small divs inside another div of the same width and assign float:left to it. Link to comment Share on other sites More sharing options...
beennn Posted April 4, 2014 Author Share Posted April 4, 2014 Is it not possible to achieve the desired result with a single div that's floating left? Link to comment Share on other sites More sharing options...
davej Posted April 4, 2014 Share Posted April 4, 2014 Floating elements stack up next to the previous floating element if there is enough available width, but they won't go higher than the previous floating element. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>Float is weird</title><style>*{margin: 0;padding: 0;}#container{width: 80%;margin: 0 auto;background-color: #ccc;}div.small{float: left;width: 200px;height: 200px;border: 1px solid black;background-color: red;text-align: center;}div.smallrect{float: left;width: 200px;height: 100px;border: 1px solid black;background-color: blue;text-align: center;}div.tinyrect{float: left;width: 100px;height: 30px;border: 1px solid black;background-color: yellow;text-align: center;}div.medrect{float: left;width: 80px;height: 40px;border: 1px solid black;background-color: orange;text-align: center;}footer{text-align: center;font-size: 10pt;float: none;clear: both;}</style><script>window.onload = function(){var c = document.getElementById('ckbox');c.onchange = setMargins;c.checked = false;}function setMargins(){var m = document.getElementById('ckbox').checked;var list = document.getElementsByTagName('div');for(var i=0 ; i<list.length ; i++){if (m){list[i].style.margin = '10px 10px';}else{list[i].style.margin = '0';}}}</script></head><body><div id="container"><div class="small"><p>1</p></div><div class="smallrect"><p>2</p></div><div class="tinyrect"><p>3</p></div><div class="medrect"><p>4</p></div><div class="small"><p>5</p></div><div class="tinyrect"><p>6</p></div><footer><hr/><label><input type="checkbox" id="ckbox"> Enable margins</label><p>© Copyright 2013 Footer</p><p>Adjust the width of the browser window</p></footer></div><!-- end of container --></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted April 5, 2014 Share Posted April 5, 2014 (edited) You could just place tall container above short containers and float that right instead. there are several ways to do this <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript"> </script> <style type="text/css"> #wrapper {min-width: 960px; margin: 0 auto; width:75%; overflow:hidden;} .short_left, .tall_right {background-color: #999;width:48%; margin:1%; color:#fff;} .short_left {height: 200px;float:left;margin-bottom:0; clear: both;} /*.short_left ~ .short_left { }*/ .tall_right{height: 600px; overflow:hidden;} </style> </head> <body> <div id="wrapper"> <div class="short_left">1</div> <div class="short_left">2</div> <div class="short_left">2b</div> <div class="short_left">2c</div> <div class="tall_right">3</div> </div> </body></html> Edited April 5, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
beennn Posted April 5, 2014 Author Share Posted April 5, 2014 Ah ok, I'll do that. Thank you both for the help. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now