html - how to collapse width of parent element to total width of child elements -
my parent width takes whole 100% width of parent element.
instead, want parent width collapse total width of child elements.
jsfiddle : http://jsfiddle.net/z9unk/232/
notice how red-bordered parent width greater total width of green-colore child elements. want collapse parent width.
please advise necessary changes.
html
<div class="item1"> <div class="item2"> item2 </div> <div class="item2"> item2 </div> </div> css:
.item1 { position:relative; white-space: nowrap; width:auto; overflow: hidden; border:2px solid red; } .item2 { position:relative; display:inline-block; background-color: green; width : 255px; height : 205px; margin-right:6px; border:1px solid blue; }
.item1 block-level element takes 100% of width of parent default.
you change type of display of .item1 element table or inline-block:
.item1 { /* other css declarations */ /* display: inline-block; */ /* or */ display: table; } here fiddle.
note: if internet explorer doesn't run in compatibility view, there no problem.
however force ie run in standard mode, add following <meta> tag in <head> section:
<meta http-equiv="x-ua-compatible" content="ie=edge" /> more info: http://msdn.microsoft.com/en-us/library/cc288325%28vs.85%29.aspx
Comments
Post a Comment