using CSS to position elements that are generated dynamically

Hey there, I'm facing a little issue with my elements. These elements are being generated dynamically and I'd like to display them in a 4 column layout. The challenge is that they arrive separately and I can't simply wrap them in a div and use display:inline-block and float:left.

<section data-field="box-image">
    <img
        src=""
        width="160" height="160" alt="">
</section>
<section data-field="box-content">
    <h3>Aquarius</h3>
    <p>20 January&nbsp;- 18 February</p>

</section>
<section data-field="box-image">
    <img
        src=""
        width="160" height="160" alt="">
</section>
<section data-field="box-content">
    <h3>Pisces</h3>
    <p>19 February&nbsp;- 20 March</p>
</section>

This is how it currently looks: https://i.stack.imgur.com/10ba5.png

However, I want it to appear like this: https://i.stack.imgur.com/eA6KL.png

I've considered using jQuery or JavaScript to wrap them, but wonder if CSS could do the trick?

The HTML is being generated in the DOM as follows: {{#each infoContent as |item|}}

 <div class="col-md-12 boxes-container">

                    {{{item.box}}}


                </div>

                {{/each}}

In essence, I want to wrap each box-image and box-content in a div so that I can style them with CSS. If there's another way to achieve the layout shown in my image, I'm all ears!

css

Answer №1

Here's a code snippet for creating a responsive layout:

Utilize the position and flex properties to achieve this layout: 

section:nth-child(2) {
    position: absolute;
    top: 160px;
    left: 0;
    width:160px;
}
.section-block {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    position: relative;
    width: 350px;
    margin: 0 auto;
    text-align: center;
}
section:nth-child(4) {
    position: absolute;
    top: 160px;
    right: 0;
    width:160px;
}
section:nth-child(1) {
    margin-right: 30px;
}
<div class="section-block">

<section data-field="box-image">
    <img
        src=""
        width="160" height="160" alt="">
</section>
<section data-field="box-content">
    <h3>Aquarius</h3>
    <p>20 January&nbsp;- 18 February</p>

</section>
<section data-field="box-image">
    <img
        src=""
        width="160" height="160" alt="">
</section>
<section data-field="box-content">
    <h3>Pisces</h3>
    <p>19 February&nbsp;- 20 March</p>
</section>

</div>

You can also use the Flexbox Columns approach for your layout:

section {
    width: 160px;
    height: 160px;
    text-align: center;
}
.section-block {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 320px;
    width: 320px;
    margin: 0 auto;
}
section:nth-child(1) {
    margin-right: 20px;
}
<div class="section-block">

<section data-field="box-image">
    <img
        src=""
        width="160" height="160" alt="">
</section>
<section data-field="box-content">
    <h3>Aquarius</h3>
    <p>20 January&nbsp;- 18 February</p>

</section>
<section data-field="box-image">
    <img
        src=""
        width="160" height="160" alt="">
</section>
<section data-field="box-content">
    <h3>Pisces</h3>
    <p>19 February&nbsp;- 20 March</p>
</section>

</div>

Another method is to use the column-count property for your layout:

section {
    width: 160px;
    height: 160px;
    text-align: center;
    display: inline-block;
}
.section-block {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 40px; 
    -moz-column-gap: 40px; 
    column-gap: 40px;
    width: 320px;
    margin: 0 auto;
}
<div class="section-block">

<section data-field="box-image">
    <img
        src=""
        width="160" height="160" alt="">
</section>
<section data-field="box-content">
    <h3>Aquarius</h3>
    <p>20 January&nbsp;- 18 February</p>

</section>
<section data-field="box-image">
    <img
        src=""
        width="160" height="160" alt="">
</section>
<section data-field="box-content">
    <h3>Pisces</h3>
    <p>19 February&nbsp;- 20 March</p>
</section>

</div>

Answer №2

Grouped the image and text within a single div.

div {
  display: inline-block;
  width: 45%;
  text-align: center;
}
<div>
  <section data-field="box-image">
    <img src="" width="160" height="160" alt="">
  </section>
  <section data-field="box-content">
    <h3>Aquarius</h3>
    <p>20 January&nbsp;- 18 February</p>

  </section>
</div>
<div>
  <section data-field="box-image">
    <img src="" width="160" height="160" alt="">
  </section>
  <section data-field="box-content">
    <h3>Pisces</h3>
    <p>19 February&nbsp;- 20 March</p>
  </section>
</div>

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

Tips for creating a vertical Angular Material slider with CSS

Attempting to modify the angular material directive to render vertically has been a challenge. I experimented with using transform:rotate in the CSS, however, it resulted in the slider behaving and rendering differently. md-slider { position: absolute ...

javascriptcssangularjshtmlangular-material

What is the best way to remove unnecessary space in a div when the content is smaller than the height, while still using overflow:auto?

HTML CODE <p>overflow:auto</p> <div class="auto">This code snippet will add a vertical scroll bar to the content within the div if it exceeds the height of the div. The background color is set to green, width and height are both 100px, ...

csshtmlheightoverflow

What steps should be followed in order to replicate the border design shown in the

Checkboxes Border Challenge I am looking to connect the borders between my checkboxes. I attempted to use pseudo-borders, but encountered issues with setting the height for responsiveness across various screens. If anyone has suggestions on how to tackl ...

cssresponsive-designbootstrap-5borderpseudo-element

Issue with jQuery's addClass() function not functioning properly on Internet Explorer versions 8, 9, and possibly others as well

Here is some basic HTML code: <div class="stuff-choice"> <div class="item a"> <label class="signup-checkbox"> <input type="checkbox" value="a" name="stuff[a][]" id="stuff_choice_" class="things"> <strong>A&l ...

jquerycssinternet-explorer

Aligning a picture at the center of the screen with CSS - Various screen and image sizes

For my project, I need to design a web page with a single image perfectly centered both vertically and horizontally on the screen. Here are the specific requirements: The client's screen size is unknown (mobile) The image will be user-defined with u ...

javascriptcssenyo

How can I use appendChild to place two different elements into a single div?

While exploring similar questions on this topic, I have unfortunately not come across a solution that works for me. My challenge is trying to insert two a elements inside of a newly created div element using appendChild. However, I am unable to append them ...

javascripthtmlcsstypescript

Modify/Adjust/Move the image uploaded by the user in VueJS before transferring it to an aws s3 bucket

Can you resize images in vuejs using vanilla js? I've managed to upload an image and send it to my s3 bucket using vue, but I'm struggling to figure out how to transform an image within vuejs and display it. Document.querySelector doesn't se ...

javascripthtmlcssvue.js

Learn how you can store checkbox values in an array when a checkbox is clicked by utilizing AJAX

Creating checkboxes in HTML <input type="checkbox" name="options[cid]" value='1' onChange="chkdeptCount(this.value)" class="test"> <input type="checkbox" name="options[cid]" value='2' onChange="chkdeptCount(this. ...

phpjqueryhtmlcssajax

What causes the scrollTop to appear erratic?

There is a simple issue that I find difficult to explain in text, so I have created a video demonstration instead. Please watch the video at this link: The functionality on my page works perfectly when scrolling down, as it replaces images with the next i ...

javascriptjqueryhtmlcssscrolltop

Why is there a thin line still visible on the other sides when a transparent background is used, but only on mobile devices, with a curved border on one side?

Recently, I've delved into the world of creating CSS art and stumbled upon a peculiar issue with CSS borders that has left me puzzled. When I apply a border to only one side of an element with a transparent background and rounded edges, I notice a fa ...

css

Navigate through the seamless elements with scroll snapping

I need to find a way to make horizontal scrolling on my really wide graph snap to specific points along the x-axis. I initially tried using scroll-snap-points-x, but unfortunately it doesn't seem to be supported. My attempt to add invisible elements ...

cssscroll

Is there a way to incorporate an animated element within the track of my circular progress bar?

My circular progress bar features two paths, with one path increasing in length as data is received, eventually turning the entire circle red. Here is the SVG HTML code: <path d="M 50,50 m 0,-47 a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,-94" stroke="#A9B0B7" ...

javascriptjqueryhtmlcsssvg

What techniques can I use to ensure that my website's layout adjusts correctly when resized?

body { padding: 0; margin: 0; font-family: 'Roboto', sans-serif; font-size: 16px; box-sizing: border-box !important; } a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; text-decorat ...

htmlcssflexboxmedia-queries

Convert the background image (specified in the CSS with background-image) into a PHP variable

I am looking to create a product gallery featuring 5 products, each with its own background image attribute. I am using a loop to insert the product images and I want each loop to display a different background-image. One approach I have considered is usi ...

phpcsshtml

What is the process to determine which section of the image is shown when I hover over it?

I have implemented colorbox for popups on my website located at in the "OUR PORTFOLIO" section. I customized the default images for previous, next, and close buttons, but when I hover over them, they display the wrong parts of the image. I'm unable t ...

jquerycss

Dealing with ng-repeat and button alignment across Chrome, Edge, and Firefox

Can someone help me understand this strange behavior I am experiencing across all browsers? <div style="margin-top:5px"> <button translate="clear" ng-click="xyz.clear()" class="btn btn-default"></button> <butt ...

htmlcssangularjs

How do I incorporate a jcarousel slider into a thickbox popup using jQuery, HTML, and CSS?

I'm attempting to incorporate a dynamic car carousel slider into a popup that opens with Thickbox. I've made numerous attempts but haven't achieved success yet. It works when called directly in HTML, but doesn't function properly when ...

jqueryhtmljquery-uicss

The usage of the bootstrapTable() function creates a gap below the displayed table information

Currently, I am working on incorporating a table into my webpage that will load data from an API. After some research, I found a Bootstrap table library to assist with this task. However, I have encountered an issue with setting the table height dynamicall ...

javascripthtmlcsstwitter-bootstrapbootstrap-table

Place the div absolutely on top of the Flash content

Can a <div /> be absolutely positioned over a Flash banner without including wmode="transparent" in the banner? I am trying to display a lightbox above my ads, but I cannot make changes to the banners since they are provided by a third party. Edit: ...

javascriptcssflashinternet-explorerxhtml

Adjust the size of an element by utilizing a different element

I'm facing a challenge with this code. I need to dynamically set the width of the "wrap-description" divs to be equal to the width of the corresponding "picture-damage" images plus an additional 20 pixels. Since there will be multiple elements for bot ...

cssangularjsangularjs-ng-repeatdirectiveng-style