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

How should I refer to this style of font?

After trying to implement a font from bulletproof @font-face as a template for my website, I am facing issues. My goal is to utilize the perspective-sans black regular font. Despite uploading the necessary files - including the css style sheet provided in ...

cssfontsfont-face

Having trouble placing the flash element above the HTML?

Despite my efforts to use SWFObject to embed a swf file on my webpage, it seems that the flash movie is covering some of the HTML components. Strangely enough, the HTML elements are bleeding through and appearing on top of the flash content. I've tri ...

htmlcssflashz-indexwmode

Having difficulty changing placeholder text style in Scss

I'm a newcomer to SCSS and I'm attempting to customize the color of my placeholder text from light gray to dark gray. Below is the HTML code snippet: <div class="form-group"> <textarea class="thread-textarea" ng-maxlength="255" ma ...

csshtmlsass

Button located beneath or above each individual image within the *ngFor loop

With the *ngFor loop, I am able to populate images but now I want to include a button below or on each image. Unfortunately, my CSS knowledge is limited. Below is the code I have: HTML Code <div class="container"> <div ...

cssangular

Mobile view causes malfunction in Bootstrap Toggle Burger Menu functionality

<nav class="navbar navbar-expand-lg navbar-dark px-2 " style="background-color:#E53935;"> <a class="navbar-brand" href="#">FoodFusion</a> <button class=&quo ...

phphtmlcssmenu

Switching to a dropdown navigation option

Sorry for the repetition, but I haven't been able to find a solution to my problem yet, so here I am asking again. I am still getting the hang of html5 and css3, and while I've managed so far, I'm stuck now. I want to turn one of the option ...

htmlcssdrop-down-menu

What is the best way to eliminate the right margin from my div element?

On my contact page, there's a div with the ID of contactdetails that appears to have a margin on the right side when viewed in Chrome's developer tools. This margin is causing some layout issues, specifically preventing me from placing the Google ...

htmlcss

Removing the rows that do not contain a table - nested div elements within other div elements

I am trying to create stripped rows with "complex" children, but I'm having trouble figuring out how to do it. I am using bootstrap, although I'm not sure if that makes any difference! This is what I have attempted so far: https://jsfiddle.net/ ...

htmlcssbootstrap-4css-selectors

I am trying to display my progress bar in a col-sm-6 format on screens larger than 546px, however, despite my attempts, I am not seeing any changes on the screen

Is there an alternative method if bootstrap is unable to handle this? I have used col-xs-6, but all I want is to display my progress bar in the image shown on small screens. Here is how I want to display my image on small screens. <div class="cont ...

htmlcssgridprogress-barbootstrap-5

aligning content that has exceeded the boundaries

I have a list of dynamically created <a> tags without text, to which I apply background images. These icons are displayed within a <div> container using the float: left; style. As the row of icons becomes too long, it overflows and starts a ne ...

htmlcss

Express-minify is having trouble loading the CSS file. If we remove a portion of the file, it should be able

After implementing the express-minify middleware, I encountered an issue with loading the attached CSS file. Even after validating the CSS using an online service, no errors were detected. I attempted to debug by gradually removing elements, and the prob ...

node.jscssexpressminify

Creating CSS-in-JS Components in React JS without External Stylesheet interference

import React, { Component } from "react"; import './navbar.css' class NavBar extends Component { render() { return ( <div> navbar content </div> ); } } export default NavBar; If I were to ...

cssreactjs

Selenium Webdriver faced challenges in identifying dynamically created scripts using CSS selectors

I am in need of assistance with the following: Requirement: On the homepage, there is a navigation menu bar that changes appearance when scrolling down. This change is reflected in the body class name switching from "home" to "home scriptable persistent-o ...

cssselenium

Switching the background color in a diagonal transition when hovering from the bottom left to the top right

I found a helpful answer on this question regarding a certain technique. However, I am curious if it is feasible to implement a diagonal left-to-right background color transition - specifically from bottom-left to top-right? Here is the CSS and HTML code ...

htmlcssanimationtransitionlinear-gradients

What is the solution to removing the bottom margin from the jumbotron in the bootstrap framework?

I am building a website for my high school robotics team and I am new to HTML and CSS (bootstrap). I want to get rid of the gap between my banner and navbar on my site. Is there a way to remove that space? Check out our website: www.robotichive3774.com & ...

htmlcsstwitter-bootstrap

Using PHP to utilize logical OR or AND operators when adding a class to the global navigation's list items

I am currently working on implementing a global navigation bar using PHP on all pages. The PHP code is also being used to add a class and display the current page. The main challenge I am encountering involves selecting the parent navigation item. When on ...

phphtmlcss

Aligning inline form controls with Bootstrap and Syncfusion widgets

I'm facing a challenge aligning the Syncfusion JavaScript widget - a dropdownlist - to be displayed inline with the label. I am using Bootstrap 3. I haven't been successful in achieving a nice alignment, meaning getting the middle of the label p ...

htmlcsstwitter-bootstrapsyncfusion

Is there a way to specify both a fixed width and a custom resizable length for a Spring <form:textarea /> element?

Despite extensive research, I have yet to find an answer to my specific problem. Within a model window, I have a textarea element: <div class="form-group"> <label for="groupDescription" class="col-sm-2 control-label"> Descripti ...

javascripthtmlcssjspbootstrap-modal

Tips for showcasing HTML as code tailored to certain programming languages

While browsing the web, I stumbled upon a website that had SQL code displayed with specific classes and styles applied to it. For example, table names were colored blue when inspected. Here is a glimpse of what I encountered: I'm curious about how t ...

htmlcsspre

An unexpected background image appearing from an external CSS file

I need to dynamically change the background image of a class using an external CSS file. The image should be randomly selected from a specified path. While I know how to achieve this in PHP, I am looking to implement it in the external CSS file instead. ...

htmlcss