Expanding divs automatically depending on the content they contain

Question

Expanding divs automatically depending on the content they contain

Currently, I have been developing a template for a database-driven page that is supposed to contain four divs for content arranged like this:

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

The information in each box will always remain the same. For example, news will always be in box #1 and images in box #2. Depending on the available content, there could be all four sections displayed or only one. In cases where a box is missing, such as box 2, I am looking for a way to make box 1 expand to fill the width of the parent div.

For instance:

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

or if boxes 3 & 4 do not exist:

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

It seems like achieving this might require conditional statements, but I am curious if there is a CSS or jQuery solution. It should be a simple task, but I am struggling to figure it out.

I tried setting up two floating divs with 50% width side by side, but I am unsure how to handle expansion when one of them is missing.

Thank you!

Edit: Including HTML! Nothing too complex here...

    <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-->

jquery css html

Answer 1

Answer №1

If you prefer not to have a div in the DOM, here is a solution using only CSS.

In your HTML file, include 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>

Apply this CSS as well:

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

By doing so, you will achieve this visual result.

If div #3 and #4 are absent and you want div#2 on a new line, you may need to modify your script server-side by adding additional classes or elements.

I hope this solution proves helpful to you!

Answer 2

If you prefer not to have a div in the DOM, here is a solution using only CSS.

In your HTML file, include 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>

Apply this CSS as well:

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

By doing so, you will achieve this visual result.

If div #3 and #4 are absent and you want div#2 on a new line, you may need to modify your script server-side by adding additional classes or elements.

I hope this solution proves helpful to you!

Answer 3

Answer №2

Check out this alternative option that may not be pure CSS, but could still suit your needs depending on the requirements.

Have you considered how the children are being inserted into their parent container?

The approach here involves adding a .half class to the child element, which essentially splits its width in half. Understanding the context of your question is crucial in achieving the desired outcome.

Feel free to experiment with the following demonstration:

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);
    }
});

For a practical demonstration, view the fiddle linked here: Demo

Alternatively, explore another example showcasing how introducing an additional class can impact the layout: Demo

Answer 4

Check out this alternative option that may not be pure CSS, but could still suit your needs depending on the requirements.

Have you considered how the children are being inserted into their parent container?

The approach here involves adding a .half class to the child element, which essentially splits its width in half. Understanding the context of your question is crucial in achieving the desired outcome.

Feel free to experiment with the following demonstration:

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);
    }
});

For a practical demonstration, view the fiddle linked here: Demo

Alternatively, explore another example showcasing how introducing an additional class can impact the layout: Demo

Answer 5

Answer №3

Let's imagine a scenario where news, images, comments, and advertising elements are arranged in your HTML like this:


-------------------
|  News   | Images |
|------------------
| Comments| Advertising|
-------------------

One approach could be to always have a set base HTML structure and dynamically adjust the width of each element based on its content:

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

Your JavaScript code would then look something like this:


var isNewsEmpty = $('.news').html() == "";
var isImagesEmpty = $('.images').html() == "";
var isCommentsEmpty = $('.comments').html() == "";
var isAdvertisingEmpty = $('.advertising').html() == "";

// Adjust 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%') }

I hope this explanation proves helpful!

Update

This method will still work even if one of the sections is missing.

Answer 6

Let's imagine a scenario where news, images, comments, and advertising elements are arranged in your HTML like this:


-------------------
|  News   | Images |
|------------------
| Comments| Advertising|
-------------------

One approach could be to always have a set base HTML structure and dynamically adjust the width of each element based on its content:

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

Your JavaScript code would then look something like this:


var isNewsEmpty = $('.news').html() == "";
var isImagesEmpty = $('.images').html() == "";
var isCommentsEmpty = $('.comments').html() == "";
var isAdvertisingEmpty = $('.advertising').html() == "";

// Adjust 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%') }

I hope this explanation proves helpful!

Update

This method will still work even if one of the sections is missing.

Expanding divs automatically depending on the content they contain

Answer №1

Answer №2

Answer №3

Update

Similar questions

What causes an "Undefined index" error in jQuery when making AJAX requests?

Ways to optimize view caching to prevent unnecessary file reads and rendering

Unusual issue with jQuery function failing to detect click events

Step-by-step guide for setting up CodeMirror

Setting up the CSS loader in a Vue.js project using webpack

How to Resubmit a Form Using Ajax?

Loading an empty CSS file in Node.js

Troubleshooting: PHP Integration Issue with HTML Document

I have an HTML table with multiple cells containing inner HTML tables. I have implemented a function along with buttons to filter the main table, excluding the inner tables

Transform jQuery scroll script into vanilla JavaScript

No results found for the xpath within the <p> tag

Troubleshooting CSS3 @keyframes animation issues within Firefox's shadow DOM

What is the best way to convert every database field into a public variable in PHP?

Customize jqGrid Paging Input Size

The variables are filled with HTML tags that will render the display in

The form refuses to submit using ajax, although it typically submits without any issues

JQuery form plugin - submitting a form automatically on onchange event

Safari re-downloads background image when revisiting with jQuery CSS

What is the best method to calculate the dimensions of flex items without relying on percentages?