Need to set width depends upon its content - html

Question

I need to set width for div depends upon its content..
Below is my HTML flow.
Flow 1:
<div id="header-cart" class="block block-cart skip-content skip-active">
<div class="minicart-wrapper">
<p class="block-subtitle"></p>
<p class="empty">You have no items in your shopping cart.</p>
</div>
</div>
Flow 2:
<div id="header-cart" class="block block-cart skip-content skip-active">
<div class="minicart-wrapper">
<p class="block-subtitle"></p>
<div>
<div id="minicart-widgets"> </div>
<div class="block-content"></div>
<div class="minicart-actions"></div>
</div>
</div>
</div>
I have two HTML flows explained above..
What i need is to set
width as 220px and 300px
for
<div id="header-cart">
.
When there is an occurance of <p class="empty"> in <div id="header-cart">
<div id="header-cart"> should be in
width 220px
.
and if not it should be in 300px.
I dont know how to set flow for this cascade.
Can any one help me?? Thanks in advance..

Answer 1

You can use JavaScript for this.
if(document.querySelectorAll("div#header-cart p.empty").length==0){
document.getElementById('header-cart').style.width="300px";
}else{
document.getElementById('header-cart').style.width="220px";
}

Answer 2

By looking at your above code i feel there is no need to go for any script for this. You can acheive the same with existing css classes.
Flow 1:
Default class is applying. so, give the base width for this class.
.skip-content { width: 220px; }
Flow 2:
Active class is applying. So, give the active class width for this class.
.skip-active { width: 300px; } // This will be applied in active time.

Answer 3

i think this can be done by stylign inline
<div id="header-cart" class="block block-cart skip-content" style="width:220px;">
<div class="minicart-wrapper">
<p class="block-subtitle"></p>
<p class="empty">You have no items in your shopping cart.</p>
</div>
</div>
<div id="header-cart" class="block block-cart skip-content skip-active" style="width:300px;">
<div class="minicart-wrapper">
<p class="block-subtitle"></p>
<div>
<script type="text/javascript">
<div id="minicart-widgets"> </div>
<div class="block-content"></div>
<div class="minicart-actions"></div>
</div>
</div>
or make a another div for flow 1 and 2 like this
<div id="flow1">
<div id="header-cart" class="block block-cart skip-content">
<div class="minicart-wrapper">
<p class="block-subtitle"></p>
<p class="empty">You have no items in your shopping cart.</p>
</div>
</div>
</div>
<div id="flow2">
<div id="header-cart" class="block block-cart skip-content skip-active">
<div class="minicart-wrapper">
<p class="block-subtitle"></p>
<div>
<div id="minicart-widgets"> </div>
<div class="block-content"></div>
<div class="minicart-actions"></div>
</div>
</div>
</div>
</div>
CSS:
#flow1 {width:220px;}
#flow2 {width:300px;}
sample - http://jsfiddle.net/wd54paav/