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

Using " " to split a name into two lines is not being recognized

My issue involves the display of tab names in two lines within multiple tabs. You can view the demonstration here. I attempted to use the \n character while setting the tab name but it was not recognized. Any suggestions on how to achieve this? Here ...

javascripthtml

Ensure that the div remains within the viewport

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Tit ...

javascripthtmlcssweb

Why is my element still occupying space even though it has been hidden with a display of none?

Currently, I'm working on a dropdown navigation menu where one of the list items causes space issues when the display property is set to none. Specifically, the 'Book A Table' item isn't meant to be visible in the center div when the sc ...

javascripthtmlcssresponsive-design

Managing selected ticket IDs in a table with AngularJS

I have a table that includes options for navigating to the next and previous pages using corresponding buttons. When I trigger actions for moving to the previous or next page (via controller methods), I store the IDs of checked tickets in an array $scope. ...

javascripthtmlangularjs

Design a Hover Mega Menu - click outside to close

Although there are similar topics on stackoverflow, the code I have is different from them. I am trying to achieve the following: If I click on the search box (the white square on the site), my search box should open If I open the search box and then cl ...

jquerycss

Tips for adjusting the close date based on the selected date in a dropdown datepicker

Here is a sample code snippet: <input id="date1" name="start_date" id="dpd1"/> <select class="form_line_only form-control" name="ho_night"> <option selected> 0 </option> <option ...

javascriptjqueryhtmldatepicker

Complex UL structure with nested LI items and both column and inline styling

I'm facing a challenge that seems insurmountable - I can't even begin to tackle it, so I don't have a polished solution to present. All I have is the source code and my goal. My task is to create a three-level UL structure. The top level sh ...

htmlcss

`Apply event bindings for onchange and other actions to multiple elements loaded via ajax within a specific div`

My form includes various input fields, dropdowns, and text areas. Upon loading, jQuery locates each element, sets its data attribute to a default value, attaches an onchange event, and triggers the change event. The issue arises when some dropdowns are d ...

javascriptjqueryhtmlajaxevents

Store the checkbox's data in the database for safekeeping

Hey there, I'm working on saving the value of a checkbox using PHP. The twist is that the value is generated through JavaScript. How can I handle this scenario and save the value using PHP? Checkbox: <input type='checkbox' name='ca ...

javascriptphphtmlcheckbox

Creating a Facebook link widget similar to Grooveshark: A Step-by-Step Guide

Recently, I shared a Grooveshark link on Facebook (like http://grooveshark.com/s/Toothpaste+Kisses/3gGocy?src=5) and to my surprise, the link appeared to be normal at first. However, once clicked, it magically transformed into a Flash widget like this. The ...

htmlfacebookflashfacebook-opengraphgrooveshark

The Jssor bullet navigator is not visible on the webpage

Currently, I am working on implementing a full-width slider with arrow navigators, bullet navigators, and captions using the Jssor plugin. Rather than copying and pasting example code, I decided to tackle this project independently with just a little guida ...

javascriptjqueryhtmlcssjssor

"Get a glimpse of the brackets image with real-time live

I seem to be encountering a strange issue. I have double-checked the source code for my image, and when I view the page in Chrome without using Brackets, the image displays properly. However, when I use Brackets Live preview, the image does not show up i ...

htmlcssadobe-brackets

Stop the content inside a div box from wrapping around the edges when using Bootstrap

Utilizing bootstrap to structure a webpage, I have organized three divs next to each other within a row. The widths of the divs are set as follows: 2 columns, 6 columns, and 4 columns in a 12 column layout. The middle div has a minimum width defined. As a ...

htmlcsstwitter-bootstrap

Flot Graphs: A unique dual-axis line chart with the ability to stack data on one axis

Is it possible to utilize the FLOT Javascript library for creating a chart with dual axis and three data sets? I am specifically looking to have one data set on the left axis and two on the right axis. Ideally, I want to stack the two datasets on the right ...

javascripthtmlchartsflot

What are the steps to modify the text color in WKWebView?

I've customized my ViewController to include a WKWebView, where I load my content from both .html and .css files. The result resembles a controller for reading books within the Apple Books app. do { guard let filePath = Bundle.main.path(fo ...

htmlcssiosswiftwkwebview

My website crashed after attempting to update WordPress

After upgrading my website to Wordpress 3.4, I encountered a major issue that caused significant damage to my site. It seems that half of my posts were not accessible and resulted in a 404 error. Additionally, pages 3 and 4 of my posts also showed a 404 er ...

htmlwordpresspermalinks

Instructions for adding transitions to an entire page in material-ui while maintaining a fixed AppBar

Is there a way to ensure that the material-ui AppBar remains fixed at the top while being wrapped with page contents in a transition? I want the AppBar to transition (e.g. Zoom or Slide) along with the rest of the page contents. I encountered this issue w ...

javascriptcssreactjsmaterial-ui

Differences in background-size among various browsers

Having some trouble with scaling backgrounds on different browsers. Initially designed website on Google Chrome, but background doesn't scale properly when viewed on iPhone or older versions of IE. Started with: background-size: 100% 150%; Then c ...

cross-browserscalecss

Issue with parallax scroll feature on Mobile Safari not functioning as expected

I created a JavaScript code for parallax scrolling on an image at the top of a webpage. The code functions perfectly on Chrome, Firefox, Internet Explorer, Opera, and Safari on desktop. However, when I tested it on Safari on my iPad, the parallax effect wa ...

javascriptjqueryioscssmobile-safari

Has any of my predecessors been hidden from view?

How can we detect if one of an element's ancestors has the display:none property set without having to traverse up the DOM Tree? ...

csshtmldom