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

Ways to modify the appearance of the button within ion-calendar

How can I ensure a header is displayed on each page by utilizing CSS or JavaScript/jQuery?

Is it possible to call a REST API in Javascript by passing the username and password as

Aligning the column to the right to ensure the text is centered horizontally on the screen

How to Conceal File Extensions with .htaccess

Issues arise when the sub-menu does not function properly and overlaps with other elements of

Save the contents of a file within an HTML table using jQuery

When attempting to send JSON data using Ajax, you may encounter an issue such as receiving an error message

Exploring the differences between Material-UI's makeStyles and withStyles when it comes to

Altering the appearance of a component that is currently selected and in use

Utilizing jQuery for resizing images

I am currently facing an issue with retrieving the class value that is being generated by PHP code

I require the variable to be accessible from all corners

Change the JavaFX ToggleButton's color and revert back to its original color

Retrieving specific value from a Parent Controller in AngularJS using UI Router

Displaying database values in an array within an HTML format

The concept of CSS inheritance within div elements

What is the method to retrieve the return value from this ajax request?

Transfer data between an HTML page and a PHP page hosted on separate locations using jQuery

Is it possible to increment an integer value in jQuery after obtaining the sum result?