Manipulating Widths

Adjusting widths of containers based on the child container.

by Joe Saad

HTML

<div class="x-editable">
    <div id="child1">child1</div>
</div>
<div class="x-editable">
    <div id="child2" class="midLarge">child2
        <div class="place">sas<div class="arc">12</div></div>
    </div>
</div>
<div class="x-editable">
    <div id="child3">child3</div>
</div>
<div class="x-editable">
    <div id="child4">child4</div>
</div>
<div class="x-editable">
    <div id="child5">child5</div>
</div>

CSS

.x-editable {border:1px solid red;padding: 2px;}

#child1 {border:1px solid blue; width: 200px; height:100px}
#child2 {border:1px solid green; width: 300px; height:100px}
#child3 {border:1px solid yellow; width: 380px; height:100px}
#child4 {border:1px solid orange; width: 260px; height:100px}
#child5 {border:1px solid violet; width: 500px; height:100px}

.place {width: 40px;border: 1px solid pink;}
.arc {border: 1px solid orange;}

JavaScript

$(function(){    
    $('.x-editable').each(function(){
        var $this = $(this);
        $this.css('width',$this.find('>:first-child').css('width'));
        $this.find('>:first-child').css('width','100%');
    });    
    
    $('.midLarge').css('width','68%');
    $('.midLarge').closest('.x-editable').css('width','1020px');
    $('.midLarge .place').find('>:first-child').css('width','25px');
});