Adjust the size of a div based on the dimensions of its child div

Is it possible to create a popup with sub_div elements without experiencing blank spaces when resizing the window? Take a look at this example:

http://jsfiddle.net/qd5kbxc7/

    <div id="all">
        <div id="sub_all"></div>
        <div id="sub_all"></div>
        <div id="sub_all"></div>
        <div id="sub_all"></div>
        <div id="sub_all"></div>
    </div>

#all {
    background:#ccc;
    width: auto;  
    display:table;

}

#sub_all {
    background:#ff0000;
    float:left;
    margin-left:10px;
    margin-bottom:5px;
    width:30px;
    height:30px;

}

When resizing the window to a smaller size, there may be empty space in the "#all div". Any suggestions on how to fix this issue?

Answer №1

When utilizing a table layout within the parent container, make sure to apply display:table-cell to the child containers. This approach will automatically provide equal spacing for any number of child elements.

Check out the demonstration on jsFiddle: http://jsfiddle.net/94hsdu5e/

HTML:

<div id="all">
    <div class="sub_all"></div>
    <div class="sub_all"></div>
    <div class="sub_all"></div>
    <div class="sub_all"></div>
    <div class="sub_all"></div>
    <div class="sub_all"></div>
    <div class="sub_all"></div>
</div>

CSS:

#all {
    background:#eaeaea;
    width: 100%;  
    display:table;
    border-spacing: 10px 5px;   /*horizontal spacing / vertical spacing*/
}

.sub_all {
    background:#33ccff;
    display:table-cell;
    height:30px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure Website Accessibility by Implementing Minimum Resolution Requirements

Is it possible to create a website that only opens on screens with a resolution of at least 1024 x 768, and displays an error message on unsupported resolutions? I've tried using JavaScript to achieve this, but haven't had any success. Any assis ...

The HR element seems to be fixed in place and is not moving

I'm having trouble figuring out what's causing the issue, so I wasn't sure how to title it. Any help in looking at the code would be greatly appreciated. Here is the problem: https://i.sstatic.net/b73CA.jpg The HR tag should be positioned ...

Is it possible for my CSS to be conditional based on the absence of a class?

Here is my current CSS code: a.button:hover, .mini-menu > li > a:hover { xxx } Is there a method to apply this hover effect exclusively to the button, but only if it does not have the "disabled" class? ...

Can Microsoft Bot Framework chat window support rounded border corners?

Is it possible to style border corners in the Microsoft bot framework? I've attempted the following: const styleSet = window.WebChat.createStyleSet({ botAvatarImage: '/assets/logo.png', bubbleBackground: ...

How to utilize the translateY() method to seamlessly shift concealed elements with no empty space

My goal is to create an interactive animation that reveals a specific section when a user clicks on an element. Initially, this section is hidden from view using the translateY(-700px) property. However, I have noticed that applying a transition effect to ...

Issue with body element displacement when utilizing Bootstrap 5.2 toast component

While utilizing a Bootstrap 5 toast, I noticed that it causes the entire body to shift down. I suspect that there may be an issue with how I am handling relative and absolute positioning attributes, but I am uncertain. This is my first time using Stack Ove ...

"Idle Encasement" resulting in an abundance of empty room

I am currently working on building a website (as a beginner) and encountering an issue where the footer section is abnormally longer on one specific page compared to others. It's puzzling because the same code works perfectly fine on other pages but s ...

Currency Conversion Rates Showcased

Why does the exchange rate consistently show as N/A in the code below after selecting a currency pair, and how can this issue be resolved effectively? I anticipate that the exchange rate value will be displayed accurately once a pair is selected. What st ...

Incorporating external CSS and JS files into your WordPress website

Hello, I am unfamiliar with the Wordpress framework and I am seeking guidance on how to add an external CSS and JS file to my Wordpress page. I have successfully created a new page, but would like to incorporate a CSS and JS file into it. Would creating a ...

Eliminate the CSS triggered by a mouse click

Having some difficulty toggling the switch to change the background color. Struggling with removing the applied CSS and getting it to toggle between two different colored backgrounds. Code Sample: <!Doctype html> <html lang="en"> <head> ...

What is causing Safari to block styling for <em> elements in RESET.CSS only?

I am utilizing Eric Meyer's reset.css file, which can be found at this link: Interestingly, my <em> definition in my main stylesheet is working perfectly fine on all browsers except Safari. Somehow, only in Safari, the styling for italics is no ...

Having difficulty positioning content inside a div element

I am working with a set of three divs, each containing a .header class and a .content class. While I have managed to align the .header class correctly, I am facing an issue with aligning the .content class below the header with 10-15px padding on all sides ...

Customizable Designs in Oracle Application Express version 4.2

In my work supporting the organization, I am using APEX 4.2 to create a Training Calendar. While I am not a DBA or programming expert, I have been learning through trial and error. The calendar is already set up, but I am looking for a way to customize ho ...

Concealing the navigation bar on an ASP.NET webpage following user login

I recently completed my first web application using ASP.NET. https://i.sstatic.net/8HRQj.png Now, I have the top navigation (red arrow) displayed on all pages of my web app. How can I hide it from specific pages so that users only see the side navigation ...

Creating a customized design for your jQuery UI modal dialog box using CSS

I recently had to customize the jqueryui modal dialog in order to meet the standards set by my company. Currently, I am facing a cross-browser issue with the float and width of the input labels. You can view the sample website here: http://inetwebdesign. ...

Adjusting Flex-Basis for various screen sizes

I am perplexed as to why this is not functioning correctly. #parent { display: flex !important; flex-flow: row wrap; width: 100% !important; justify-content: flex-start; } .item{ flex: 1 !important; flex-basis: calc(100% / 4); box-sizing: border-bo ...

Safari experiencing a problem with the CSS mix-blend-mode: difference

I have been experimenting with a mouseover effect using mix-blend-mode. The effect is functioning as desired in Chrome and Firefox. .btn-anim { position: relative; display: inline-block; overflow: hidden; padding: 1.25rem; color: #fff; --x: 6 ...

Tips for populating a row in the Bootstrap grid with the assistance of the mr or ml classes

I've come across a roadblock here. The issue arises when attempting to fill the Bootstrap row while also utilizing mr (or ml). Initially, I attempted to calculate the numbers so that they add up to 12. In my 3-column layout, I have a column of 5, fol ...

Arranging the 1st element of the 1st row to be placed at the end using CSS Flex

One of my challenges involves choosing between two options: https://i.sstatic.net/JpWiGfW2.png In my project, I am utilizing a container with flex-wrap: wrap to showcase items of equal dimensions. However, the first item in this container stands out due t ...

"Create a CSS rule to draw a horizontal line on the one side of

Is there a way to create a horizontal line on just the left side of my text? Currently, the code I have creates a line on both sides. How can I modify it to achieve this? h2 { width: 100%; text-align: center; border-left: 1px solid #000; // Adjusted ...