What is the best way to use CSS to position the content of a div at the bottom of the

Seeking guidance on aligning content of a div to the bottom using css

Any assistance or pointing in the right direction would be greatly appreciated.

This is the desired outcome for me.

https://i.sstatic.net/WtOj6.png

This is the code snippet I am working with:

.bbb{
text-align:center;
bottom: 20px;
}
.text-wi{
border-top:2px dashed #13aff2;
padding: 5px 0 0 20px;
}

.haha{
padding:5px
}
.widget-host {
  display: grid;
  grid-template-columns:auto auto;
  grid-gap: 20px;
}

.widget-host > div.host-woovn {
border: 1px solid #e9e9e9;
padding: 0 5px 0 5px;
}
.button{
    background-color: #669900;
    text-align: center;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    padding: 8px 15px;
    display: inline-block;
    margin-bottom: 10px;
    height: initial;
    border-radius: 4px;
}
<div class="widget-host"><div class="host-woovn">
AAAAAAAAAAAAAAAAA<div class="text-wi">
– A<br>
– B<br>
– C<br>
– D<br>
– C
</div>
<div class="bbb"><a href="/" target="_blank" class="button">AAAAA</a></div>
</div>
<div class="host-woovn">
BBBBBBBBBBBBBBB<div class="text-wi">
– A<br>
– B<br>
– C<br>
– D<br>
– E<br>
– B<br>
– C<br>
– F</div>
<div class="bbb"><a href="/" target="_blank" class="button">BBBB</a></div>
</div></div>

The current implementation is not achieving my desired layout. Any insights on what could be improved?

Your help and feedback are highly valued.

htmlcsscss-grid

Answer №1

I managed to achieve this by utilizing the position property. I hope this solution proves helpful for you. Thank you.

.bbb{
    text-align: center;
    /* bottom: 20px; */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.text-wi{
border-top:2px dashed #13aff2;
padding: 5px 0 0 20px;
}

.haha{
padding:5px
}
.widget-host {
  display: grid;
  grid-template-columns:auto auto;
  grid-gap: 20px;
}

.widget-host > div.host-woovn {
border: 1px solid #e9e9e9;
padding: 0 5px 0 5px;
  position: relative;
}
.button{
    background-color: #669900;
    text-align: center;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    padding: 8px 15px;
    display: inline-block;
    margin-bottom: 10px;
    height: initial;
    border-radius: 4px;
}
<div class="widget-host"><div class="host-woovn">
AAAAAAAAAAAAAAAAA<div class="text-wi">
– A<br>
– B<br>
– C<br>
– D<br>
– C
</div>
<div class="bbb"><a href="/" target="_blank" class="button">AAAAA</a></div>
</div>
<div class="host-woovn">
BBBBBBBBBBBBBBB<div class="text-wi">
– A<br>
– B<br>
– C<br>
– D<br>
– E<br>
– B<br>
– C<br>
– F</div>
<div class="bbb"><a href="/" target="_blank" class="button">BBBB</a></div>
</div></div>

Answer №2

If you're looking to place a child element directly at the bottom of its parent, one of the simplest solutions is to utilize the position property.

.parent {
   background: #ddd;
   position: relative;
   height: 200px;
   width: 300px;
}
.child {
   background: red;
   position: absolute;
   bottom: 0%;
   left: 50%;
   -ms-transform: translateX(-50%);
   transform: translateX(-50%);
}
<div class="parent">
  <div class="child">
    I'm at the bottom!
  </div>
</div>

This technique also makes use of 2D Transforms for horizontally centering the child element. By setting position: absolute; and bottom: 100%;, the red box is positioned at the bottom of the gray box as shown in the example above.

Answer №3

I struggled with other styles like position: absolute and found them ineffective for my needs. CSS flex-box and grid proved to be the most straightforward ways to align items.

One modification I made was separating the content on the right and left into separate divs.

<!DOCTYPE html>
<html>
<body>
<style>

.widgethost{
background-color:green;
display: flex;
flex-direction: row;
justify-content:flex-start;

height:100vh;

}

.parent{
margin: 1rem;
color:white;
display:flex;
flex-direction:row;


display:flex;
flex-direction:column;
justify-content:space-between;

border:5px solid black;

}



a, a:visited, a:hover{
text-decoration:none;
color:black;
}


</style>

HTML


<div class="widgethost">
  <div class="parent aaa">
    <div class="host-woovn">
      AAAAAAAAAAAAAAAAA
    </div>
    <div class="text-wi">
      – A<br>
      – B<br>
      – C<br>
      – D<br>
      – C
    </div>
    <div class="bbb">
      <a href="/" target="_blank" class="button">AAAAA</a>
    </div>
  </div>        
  <div class="parent bbb">
    <div class="host-woovn">
      BBBBBBBBBBBBBBB
    </div>
    <div class="text-wi">
      – A<br>
      – B<br>
      – C<br>
      – D<br>
      – E<br>
      – B<br>
      – C<br>
      – F
    </div>
    <div class="bbb">
      <a href="/" target="_blank" class="button">BBBB</a>
    </div>
  </div>
</div>  

</body>
</html>

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

Experience a captivating Bootstrap 4 drop menu animation that emerges from beyond the borders of the page

I have a row that contains two divs, one with col-md-11 and the other with col-md-1. Inside the col-md-1 div, there is a dropdown that I want to animate. I am using animate css for the animation, but the issue is that the slideInRight animation starts from ...

htmlcssanimationbootstrap-4

Is there a way to create a transparent color for the Dropdown Toggle?

As I work on expanding my understanding of HTML and Bootstrap, utilizing Bootstrap version 5.3.0 Alpha 3, I encounter an issue with the Dropdown feature. Typically, when a Dropdown is used within an element such as an icon or text, it displays an arrow sym ...

htmlcssbootstrap-5

What is the best way to eliminate the Iframe scrollbar while ensuring that the entire page loads?

When I add an Iframe inside the contentArea, two scroll bars appear. I am looking for a way to hide the iframe scrollbar without hiding any of the external website's content. I have tried using the scrollbar="no" snippet code, but it didn&ap ...

javascripthtmlcssiframescrollbar

Modifying the selection options of the second dropdown menu depending on the choice made in the first dropdown menu using

Here is an example of HTML code: <select id="fruits" name="fruits"> <option selected>Please choose a fruit</option> <option>Apple</option> <option>Mango</option> <option>Banana< ...

javascripthtmlhtml-select

The synchronization issue between ng-class and animation

I'm experiencing a strange issue with ng-class and suspect that it may be related to a race condition. Here is the example on Plunker: example Below is the relevant JavaScript code: self.slideLeft = function() { if (self.end_index < se ...

javascripthtmlcssangularjs

What causes Tailwind Height to malfunction at breakpoints?

Recently, I integrated Tailwind CSS and Elements into my Laravel project. While working on the responsive design aspect, I encountered an issue with the "height" property not functioning correctly when utilizing breakpoints such as "md:xxx". Interestingl ...

csslaravelheighttailwind-cssbreakpoints

Update the body tag when the file input is modified

I am currently working on a webpage called DisplayItems.html that retrieves a list from another page named items.html. I have set it up to refresh its content every few seconds in case items.html is updated. However, I now want to implement a system where ...

javascriptjqueryhtmlcssajax

Adjusting the size and positioning of an image with CSS

Here is my situation: I am working with an image that is 1900 x 1600 pixels in size. I also have a div that is sized at 200 x 150 pixels. To adjust the image size, I used the following CSS: max-width:300px; max-height:300px; The height will be adjuste ...

htmlcss

Add a directive on the fly, establish a connection, and display it dynamically

Within my markup, I have a tag element called popup-window which is handled by a specific directive. If I wish to incorporate multiple similar widgets that can be displayed or hidden in various locations, I currently need to include all these elements dire ...

javascripthtmlangularjs

When the canvasJS range column chart is below the horizontal axis, modify the color and width of the bars

For each day of the week, there are records of fuel consumed and refilled. I envisioned representing this data in a range column chart using CanvasJS library. The unique aspect is that the color and width of the bars should change dynamically based on thei ...

javascripthtmlchartsbar-chartcanvasjs

Making sure an image is visible using Webdriver

I'm facing an issue where an image disappears after reaching a certain width size. I'm unsure how to address this using Selenium. <img id="removeimg" class="col-md-5" src="images/abc-image.png" alt="abc"> Below is the corresponding CSS co ...

javahtmlcssselenium

Transition into the value stored in localStorage

I'm currently facing an issue with fading in tabs in my project. Each tab has a unique ID which corresponds to the item in local storage that I want to fadeIn. For example, I have a tab called 'Tab1' and I try to show it using $('Tab1& ...

jqueryhtmllocal-storage

How to line up two blocks side by side in a single block with Bootstrap without the use of CSS

The bootstrap margin is causing issues with this code <div class="row"> <div class="row1 col-lg-3"> <div class="row2 col-lg-1"></div> <div class="row2 col-lg-1"></di ...

htmlcsstwitter-bootstrap

Why does pressing "enter" create a line break in HTML when typing?

Apologies in advance for what may seem like a simple CSS issue that I couldn't find an answer to on Stackoverflow. Here's the JSfiddle link: https://jsfiddle.net/kwende/fqxna79a/ In the code, you'll see two div tags: <div id="left">L ...

csshtml

Reduce the length of the text and display it upon hovering with the mouse

I am trying to figure out how to truncate text and have it expand on mouseover in a paragraph element. I attempted to truncate the content using a specific code, but I encountered an issue. While my current code expands the content when clicking on the el ...

javascriptjqueryhtml

CSS for Aligning Navigation Bar Min-Width

Can someone assist me with properly scaling my navbar (e.g. min-width 800px) and setting up the phone number div with space between it and the links? This is my first try at this, so any help is greatly appreciated. Thank you. CSS <style type="text/cs ...

htmlcss

What could be the reason for my inability to import styles.css from @rainbow-me/rainbowkit?

Currently, I am in the process of integrating the rainbowkit and wagmi libraries into an existing website that is built using web3. The integration works fine when I comment out the styles import, but unfortunately, it results in a rather unattractive appe ...

cssreactjstypescriptweb3jscryptocurrency

Python script to extract the link to a JavaScript file from the href tag in an HTML

Imagine a website similar to the following: This particular website contains links to pdf files referenced by an href tag in the page source, for example: <a href="javascript:$('form_cofo_pdf_view_B000114563.PDF').submit();">B000114563.PD ...

javascriptpythonhtmlwebweb-scraping

Changing background color of chart area in rCharts, slidify, and nvd3 was successfully implemented

When working on a slidify deck titled "Foo" with the revealjs framework and a solarized theme, I encountered a problem. Specifically, I needed to set the background color of an NVD3 plot iframe to white. If I knit it and then edit the <style> block ...

cssnvd3.jsrchartsslidify

What are the steps for sharing a json file?

{ "entry": { "city_id": "1234", "city_name": "California" } } Here is the JSON data that needs to be submitted from an HTML form to a content management system API. The form contains two text boxes for capturing city_id and city_name en ...

javascripthtmljsonpost