Populate a div with divs using automatic margins (CSS)

Question

Populate a div with divs using automatic margins (CSS)

I know this question has probably been asked before, but I've searched high and low and can't seem to find an answer. It seems like my front-end skills are lacking when it comes to searching for solutions.

Apologies in advance if this is a redundant post.

My issue is that I have a container that is 980 pixels wide, and I want to fill it with smaller divs that are 180 pixels wide. I have 7 smaller divs in total, so ideally, I would like 2 rows with 20 pixels between each div. The first row should have 5 divs, and the second should have 2.

I've tried floating the divs left and adding a margin, but this results in the total width exceeding 980 pixels, causing the layout to break.

I attempted setting a negative right margin on the container, but that didn't yield the desired result.

Any help or links to resources would be greatly appreciated!

EDIT: I should clarify that the container will be resizable, so the smaller divs should adapt to fill the available space, with the first div starting at 0px from the left and the last div ending at 0px from the right. The divs in between should adjust accordingly. I've only come across solutions for single-row layouts, so any advice on multi-row layouts would be helpful. Additionally, it would be ideal if the layout automatically wrapped to the next line if the margins between the smaller divs are less than 1 pixel.

EDIT 2: I've created a jsfiddle to illustrate my issue. The goal is for the green boxes to autofill the gray area horizontally, with a set vertical margin (e.g., 15/20 px).

http://jsfiddle.net/yfnpv/

css css-float containers margin

Answer 1

Answer №1

It seems there may be some confusion about your needs.

If I grasp the idea correctly, it might be this.

demonstration

I have included additional assisting elements :

    ....
    <div class="obj">7</div>
    <div class="obj push"></div>
    <div class="obj push"></div>
    <div class="pushend"></div>
</div>

and the CSS code is :

#container {
    max-width: 980px;
    background-color: gray;
    display: inline-block;
    text-align: justify;
}

.obj {
    width: 180px;
    height: 180px;
    background-color: green;
    display: inline-block;
}
.obj.push {
    height: 0px
}
.pushend {
    width: 100%;
    height: 0px;
    display: inline-block;
}

The concept is not my own, but I can't recall the exact source.

I suspect the original creator utilized some clever techniques with pseudo-elements to avoid altering the HTML, although I cannot recollect it precisely.

Answer 2

It seems there may be some confusion about your needs.

If I grasp the idea correctly, it might be this.

demonstration

I have included additional assisting elements :

    ....
    <div class="obj">7</div>
    <div class="obj push"></div>
    <div class="obj push"></div>
    <div class="pushend"></div>
</div>

and the CSS code is :

#container {
    max-width: 980px;
    background-color: gray;
    display: inline-block;
    text-align: justify;
}

.obj {
    width: 180px;
    height: 180px;
    background-color: green;
    display: inline-block;
}
.obj.push {
    height: 0px
}
.pushend {
    width: 100%;
    height: 0px;
    display: inline-block;
}

The concept is not my own, but I can't recall the exact source.

I suspect the original creator utilized some clever techniques with pseudo-elements to avoid altering the HTML, although I cannot recollect it precisely.

Answer 3

Answer №2

<div id="container">
   <div class="1column first">one column</div>
   <div class="1column">one column</div>
   <div class="1column">one column</div>
   <div class="1column last">one column</div>
<div class="clear"></div>
   <div class="1column first">one column</div>
   <div class="1column">one column</div>
   <div class="1column">one column</div>
   <div class="1column last">one column</div>
</div> <!-- container -->

The Cascading Style Sheets

#container {width: 630px;}
.1column {width: 150px; float: left; margin-left: 5px; margin-right: 5px;}
.first {margin-left: 0px;} 
.last {margin-right: 0px;}
.clear {clear:both;}

To ensure proper alignment, you need to calculate the total width of each div by adding the width and margin values together. For instance, the first div should be 155px (150px + 5px), the next should be 160px (150px + 5px + 5px). By setting the first and last divs to 155px and the others to 160px, the total width becomes 630px. To move to the next row, insert a clear:both div between the divs to clear floats. Repeat this process as needed.

The 5px margins create a 10px gap between each div (5px + 5px).

This is a basic example. You can explore CSS grid frameworks for more advanced setups. Ensure that the inner divs stay within the width of the "container" div to avoid issues. Remember, padding + margin + width + borders = total width. Adding a 1px border will increase the width by 2px (1px on each side).

Additionally, to center align the entire layout, include the following in the container div's CSS:

#container {width: 630px; margin-left: auto; margin-right: auto;}

I trust this information proves useful.

Answer 4

<div id="container">
   <div class="1column first">one column</div>
   <div class="1column">one column</div>
   <div class="1column">one column</div>
   <div class="1column last">one column</div>
<div class="clear"></div>
   <div class="1column first">one column</div>
   <div class="1column">one column</div>
   <div class="1column">one column</div>
   <div class="1column last">one column</div>
</div> <!-- container -->

The Cascading Style Sheets

#container {width: 630px;}
.1column {width: 150px; float: left; margin-left: 5px; margin-right: 5px;}
.first {margin-left: 0px;} 
.last {margin-right: 0px;}
.clear {clear:both;}

To ensure proper alignment, you need to calculate the total width of each div by adding the width and margin values together. For instance, the first div should be 155px (150px + 5px), the next should be 160px (150px + 5px + 5px). By setting the first and last divs to 155px and the others to 160px, the total width becomes 630px. To move to the next row, insert a clear:both div between the divs to clear floats. Repeat this process as needed.

The 5px margins create a 10px gap between each div (5px + 5px).

This is a basic example. You can explore CSS grid frameworks for more advanced setups. Ensure that the inner divs stay within the width of the "container" div to avoid issues. Remember, padding + margin + width + borders = total width. Adding a 1px border will increase the width by 2px (1px on each side).

Additionally, to center align the entire layout, include the following in the container div's CSS:

#container {width: 630px; margin-left: auto; margin-right: auto;}

I trust this information proves useful.

Populate a div with divs using automatic margins (CSS)

Answer №1

demonstration

Answer №2

Similar questions

Resizing an image within a div with automatic adjustment, centered and aligned to the bottom position

Disappear solely upon clicking on the menu

Tips for resolving the issue of windows resizing due to off-screen elementsplacement:

Adjusting the height of a textarea within a table

In my current Next.js project, I tried setting up a new [collectionId].jsx file within the pages directory, but I am facing issues with getting

What is the best way to arrange elements above and below each other in a single flexbox container?

Creating CSS dynamically using PHP

Responsive cards using Bootstrap styling

What is the best way to create a flexible grid that automatically adjusts to either two columns or one column depending on the width of the

Get the Bootstrap download that includes CSS files rather than the LESS files

Adjust the <h1> tag's size using responsive Bootstrap design

What causes the variation in results when I input CSS directly into the head section versus linking it from a separate .css file?

Starting the Android System Magnifier with a Click: A Step-by-Step Guide

My Jquery CSS Checkbox is failing to register when it's checked

Make the element switch from hidden to visible when hovering over it using CSS

Is it possible to choose only half of the elements using the :nth-child selector in

Creating a unique chrome extension that swaps out HTML and JavaScript components

Modify the text color of all input elements with Tailwind

Customizing Row Background Color in Bootstrap

The offspring elements are positioned outside of the main footer element