responsive design - max-width doesn't work with float -
i'm trying design responsive page. have 2 divs same height. both have max-width property , max-width working. once add float:left property max-width doesn't affect them.
here's example: jsfiddle
<div class="color1"> text </div> <div class="color2"> bla </div> <div style="clear: both;"> and css:
div{ height: 100px; float: left; } .color1{ background-color: #6ac1ff; max-width: 400px; } .color2{ background-color: #bdbcf4; max-width: 100px; } i want them align vertically. there way make other float , keep max-width?
use defined width percentages , float: http://jsfiddle.net/deew5/3/
div{ height: 100px; display:block; float:left; } .color1{ background-color: #6ac1ff; width: 80%; max-width:400px; } .color2{ background-color: #bdbcf4; width: 20%; max-width:100px; } use defined width percentages inline-block: http://jsfiddle.net/deew5/4/
body{font-size:0} div{ height: 100px; display:inline-block; font-size:16px; } .color1{ background-color: #6ac1ff; width: 80%; max-width:400px; } .color2{ background-color: #bdbcf4; width:20%; max-width:100px; } inline-block 2nd block drops when can no longer fit within container instead of shrinking: http://jsfiddle.net/deew5/5/
body{font-size:0} div{ height: 100px; display:inline-block; font-size:16px; } .color1{ background-color: #6ac1ff; width: 100%; max-width:400px; } .color2{ background-color: #bdbcf4; width:100%; max-width:100px; } 
Comments
Post a Comment