Automatically expanding divs based on lack of content

Question

I am working on a template for a database driven page, ideally there should be four divs for this content:

----- ----- | 1 | | 2 | ----- ----- ----- ----- | 3 | | 4 | ----- ----- 

The same content will always be in the same blocks. News is in # 1, images in # 2, etc. Based on the content provided, there may be all of these sections or just one. If, for example, window 2 does not exist, how can I get window 1 to expand to the width of the parent div?

i.e:.

 ----------- | 1 | ----------- ----- ----- | 3 | | 4 | ----- ----- 

or if 3 and 4 do not exist

 ----------- | 1 | ----------- ----------- | 2 | ----------- 

Of course, it could be something that can only be done using if / then statements, but I was wondering if there is a way to do this in CSS ... Or could it be jquery? I feel it should be easy, but my brain just doesn't know how to do it.

I set two floating margins 50% wide side by side, but I'm not sure how it will know how to expand if the other is missing.

Thanks!

Edit: Adding HTML! There is nothing interesting there ...

  <div class="auth-secondary"> <div class="auth-upcoming auth-3d"> <span class="auth-h3">Upcoming Events</span> <p> <strong>March 5, 2014</strong><br> Book signing </p> <p> <strong>March 5, 2014</strong><br> Ice cream party </p> </div><!-- end auth-upcoming --> <div class="auth-media auth-3d"> <span class="auth-h3">Media Gallery</span> <p> <img src="http://placehold.it/74x74"> &nbsp; <img src="http://placehold.it/74x74"> &nbsp; <img src="http://placehold.it/74x74"> &nbsp; <img src="http://placehold.it/74x74"> &nbsp; </p> </div> </div> <!-- end auth-secondary--> 

Answer 1

Based on your comment that ideally a div will not be in the DOM, there might be something here that helps you, pure CSS.

Add a wrapping div to your HTML for each line:

 <div class="row"> <div>1</div> <div>2</div> </div> <div class="row"> <div>3</div> <div>4</div> </div> 

Along with this CSS:

 .row { width: 600px; display: table; } .row > div { display: table-cell; } 

This will give you the result.

Taking, for example, the second div away, you get this result .

However, this makes it harder when div # 3 and # 4 do not exist and you want div # 2 to be on the next line. You need to add an extra class or something on the server side of your script.

Hope this helps you!

Answer 2

Here is an option you can use, but it is not so simple css, maybe depends on what you need.

How are children added to the parent object that contains them?

What I do is add the .half class to the child class, which splits it in half the width. To achieve the final result, I need to know the answer to the question that I asked.

Below is a demo,

CSS

 body * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .parent { width: 600px; height: 300px; border: 5px solid #ffdd00; margin-bottom: 20px; padding: 5px; } .child { width: 100%; height: 100%; background: #ff7200; } .child.half { width: 49.5%; display: inline-block; vertical-align: top; } 

JQuery

 var child = '<div class="child">I am a child DIV</div>', halfChild = '<div class="child half">I am a child DIV</div>' $('#fullTwo').on('click', function() { if($('.parent').find('.child')) { $('.parent').append(halfChild); $('.parent').find('.child').addClass('half'); } else { $('.parent').append(child); } }); 

Finally, the violin: Demo

Another fiddle showing how adding another class can affect the layout: Demo

Answer 3

lets say that news, images, comments and advertising classes position your divs as follows:

 ------------------- | news | images | |------------------ | comms | advert | ------------------- 

one option, which should be such that you always have this Html base and based on the contents of each div you determine the width of your elements:

 <div class="news"></div> <div class="images"></div> <div class="comments"></div> <div class="advertising"></div> 

now your js will look like this:

 var isNewsEmpty = $('.news').html() == ""; var isImagesEmpty = $('.images').html() == ""; var isCommentsEmpty = $('.comments').html() == ""; var isAdvertisingEmpty = $('.advertising').html() == ""; //now just set width if empty if (isNewsEmpty) { $('.images').css('width','100%') } if (isImagesEmpty) { $('.news').css('width','100%') } if (isCommentsEmpty) { $('.advertising').css('width','100%') } if (isadvertisingEmpty) { $('.comments').css('width','100%') } 

hope this helps!

Update

This will work even if one of the sections does not exit.