Auto expanding divs based on lack of content

Question

I've been working on a template for a database-driven page that ideally should have four divs for content like this:

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

The same content will always be in the same boxes. News is in #1, images in #2, etc. Based on the content provided, there could be all of these sections or only one. If for example box 2 doesn't exist, how can I get box 1 to expand to the width of the parent div?

i.e.:

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

or if 3 & 4 do not exist

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

Granted, this might be something that can only wholly be done with if/then statements, but I was wondering if there was a way to do this in CSS... Or could it be jquery? I feel like this should be simple but my brain is just not getting how to do it.

I set up two 50% width floating divs side by side, but I'm not sure how it would know how to expand if the other is missing.

Thanks!

Edit: Adding HTML! There's nothing really fancy here yet...

    <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 wouldn't be in the DOM, here might be something to help you, pure CSS.

Add in your HTML a "wrapping" div for each row:

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

Together with this CSS:

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

It will give you this result

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

It however makes it harder when div #3 and #4 don't exist and you want div#2 to be on the next line. You'll need to add an extra class or something on the server side of your script.

Hope this will help you!

Answer 2

Here is an option you can use but it is not pure css sadly, could be depending on what you need.

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

What I am doing is adding a class .half to the child class which will break the child into half the width. To achieve the end result I do need to know the answer to the question I asked.

Here is a demo to play with,

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, a fiddle: Demo

Another fiddle to show how adding another class can effect the layout: Demo