Arrange a row of fifteen child DIVs in the form of bullets at the bottom of their parent DIV

Currently, I am working on customizing a slider by adding bullets. My goal is to create a gradient background for the parent div containing these bullets. However, when I try to increase the height of the parent div, all the bullets align themselves at the top of the div.

Here is the HTML code:

<div class="parent">
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
</div>

And here is the CSS code:

.parent {
   height: 200px;
   background-image: linear-gradient(to bottom, rgba(255,0,0,0), rgb(27, 4, 4));
   width: 100%; 
   text-align: center;
   bottom: 0;
   position: absolute;
}
.child {
   background-color: blue;
   width: 25px;
   height: 5px;
   margin-left: 2px;
   display: inline-block;
}

I need help figuring out how to align all the bullets at the bottom of the parent div. Any suggestions or solutions would be much appreciated.

JSFIDDLE

htmlcss

Answer №1

Transform your layout using flexbox for easy alignment:

.parent {
  height: 200px;
  background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgb(27, 4, 4));
  width: 100%;
  text-align: center;
  bottom: 0;
  position: absolute;
  display: flex;
  align-items: flex-end; /*align at the bottom*/
  justify-content: center; /*center horizontally*/
  flex-wrap:wrap;
  align-content: flex-end;
}

.child {
  background-color: blue;
  width: 25px;
  height: 5px;
  margin: 5px;
}

body {
  margin: 0;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Answer №2

I'm not quite sure what you're trying to achieve, but one way to move those lines to the bottom of the parent div is by creating an additional container div. You can set its position to absolute and bottom to 0. To ensure horizontal alignment, you may need to adjust the container width to 100%.

Here's a simple HTML and CSS example:

<div class="parent">
  <div class="container">
    <div class="child"></div>
    ...
    <div class="child"></div>
  </div>
</div>

CSS:

.container {
  position: absolute;
  bottom: 0;
  width: 100%;
}

You can also view a working demo here.

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

Utilize image maps for dynamically displaying and concealing div elements

Here is the current state of my code... VIEW DEMO I am aiming to display the blue text to the user only when they click on the blue circle, etc... I believe I need to modify the attributes of the div elements, but I am not very familiar with jQuery and ...

jqueryhtmlimagemap

Creating a Distinctive HTML Structure with Div Percentage (HTML 4)

I am new to web design and have a unique approach; I believe in the importance of flexibility. It puzzles me why pixels (px) are commonly used instead of percentages, maybe my perspective is misunderstood. I've been on the hunt for a basic HTML layo ...

cssdomlayouthtml

What are the reasons and methods for storing multiple images within a single image?

Lately, I've observed a trend where websites are consolidating multiple images into one large image, similar to Google's homepage. Although we see many small images on the left side, it is actually just one single image: I am curious about how ...

htmlimage

Mastering the Art of Displaying Every Side of a Spinning Cube Using HTML and CSS Animations

As I navigate the online world, my goal is to create a dynamic animation of a rotating cube with an image on each face. Despite my efforts, I am struggling to display all faces simultaneously, especially the front and back faces. I have explored various so ...

htmlcsscss-animations

Discover the content of meta tags using Python and Beautiful Soup

I am attempting to extract the meta data from a specific website, as shown in the code below. import requests from bs4 import BeautifulSoup source = requests.get('https://www.svpboston.com/').text soup = BeautifulSoup(source, features="html.par ...

pythonhtmlweb-scrapingbeautifulsoupmetadata

I need assistance in utilizing my PHP variable UserNameID to remove the specific user's row from the database

I want to give users the option to delete their account from the database with a simple button click on my php forum. See the code snippet below: <div class="btn-group"> <button style="width:200px" type="button" class="btn btn-primary"> ...

phphtmlmysql

How to temporarily disable CSS hover effects

I have a menu with some links <ul id="nav"> <li> <a href="#">Project</a> <div class="subs"> <div> <ul> <li> <h3>Save</h3> <ul> <li> <a i ...

jquerycss

Interactive Vue.js canvases that adapt and respond to various

I am currently working on adjusting my canvas to fit within its container in a Vue component. When I call resizeCanvas() in the mounted hook, I notice that the container's height and width are both 0. How can I create a canvas that dynamically fits it ...

javascriptcssvue.jshtml5-canvas

Issue with submitting a form within a React modal - lack of triggering events

I am utilizing the npm package react-modal (https://www.npmjs.com/package/react-modal) in my project. The issue I am facing is that when I click on 'Submit', nothing happens. The function handleSubmit</a> is not being triggered, as no conso ...

javascripthtmlreactjsnext.js

What is the process for altering the background color in this html5up template?

I am struggling to change the brown background color on my website. Despite updating various color values in the CSS file such as'backgroundcolor', I seem unable to make any changes. I have tried altering multiple color entries, but nothing seems ...

htmlcssbackground

Loading times for the Polymer Project are sluggish

The website design is very appealing. However, it seems to be loading quite slowly even on Google's servers. Is there a way to speed up the initial load time of the Polymer site? Additionally, there are numerous HTTP requests being made; is there a wa ...

javascripthtmlcsspolymerstyling

Identifying and categorizing flip switches with jQuery without relying on div elements

Is it possible to have two jQuery flip switches side by side, but only one visible if the screen is too narrow? I've tried assigning different classes to each switch for styling purposes, but it doesn't seem to work correctly. When I assign a cl ...

jqueryhtml

After the automation is finished, I am interested in outputting the IMDB rating of a movie or series to the terminal

I prefer using Google search to find the element because I find it easier to navigate compared to IMDB. import selenium.webdriver as webdriver print("This script is designed to retrieve the IMDb rating of a movie or TV series!!!") def get_results(search_ ...

htmlcssseleniumwebweb-crawler

I've been attempting to access the Marketo API, but unfortunately, I haven't had any luck

I've been attempting to make a Marketo API call, but I keep encountering this issue: net::ERR_NAME_NOT_RESOLVED Here is the code snippet I'm using for the function: var marketoAPIcallURL = 'https://182-EMG-811.mktorest.com/rest/v1/ ...

jqueryhtmlajaxapimarketo

The grid columns are not utilizing the entire space of the rows and are extending beyond to the next line

I'm currently designing a card layout with images and aiming for uniformity in size. The plan is to have 4 columns in each row, with one card per column. Each subsequent row will also contain 4 cards. However, there seems to be an issue where the ca ...

htmlcsstwitter-bootstrapbootstrap-5card

Unable to display background image on Webpage due to blank page issue while uploading it with HTML and CSS

I've been attempting to build a webpage with an image as the background, but I seem to be facing some issues. Instead of seeing the desired image, all I get is a blank white page. The folder named "images" is located in the same directory as my HTML a ...

htmlcss

Customizing SharePoint Web Part Styles with CSS: Header Alignment Issue with Body_TEXT

I am currently working on branding a SharePoint website and have encountered an issue with aligning background colors for the title area and body of some web parts. Despite applying background colors, the alignment between the title and body areas is off ( ...

csssharepointweb-partsbranding

Text field auto-saving within an iFrame using localStorage is not functioning as expected

My goal is to create a rich text editor with an autosave feature using an iframe. Although each code part works individually, I am struggling to combine them effectively. View LIVEDEMO This graphic illustrates what I aim to accomplish: The editable iFram ...

javascripthtmliframelocal-storageautosave

jPlayer 2.0 Time Tracker: Know How Much Time Has Passed and How Much

Using jPlayer 2.0 for my project. The play, pause, and other functions are all working fine, but I'm struggling to retrieve the elapsed/remaining time attributes from the jquery object. I've experimented with event handlers and tried setting up ...

jqueryhtmlcloudwebosjplayer

Hiding a button based on the visibility of another button in the user's viewport

Is there a way to dynamically hide button B when the user scrolls and button A becomes visible on the screen? Additionally, how can we show button B again once button A is no longer visible to the user? Both buttons should never be visible simultaneously. ...

javascripthtmljquerycss