An effective way to align the <hr> tag within a DIV

What is the best way to position the line <hr> approximately 15 pixels above the bottom of the text block, between the button and the bottom textblock?

.box {
  background: white;
  float: right;
  position: relative
}

.space {
  padding: 15px;
}

img {
  max-width: 100%;
}

.button {
  position: absolute;
  bottom: 40px;
  margin-left: 15px;
}

@media (max-width:768px) {
  .button {
    position: relative;
    bottom: auto;
    margin-left: 15px;
  }
}
<div class="box">

  <img class="box" src="https://d2f0ora2gkri0g.cloudfront.net/e4/16/e4164876-1967-4303-9a57-aae00eb2b22b.png" alt="oproeien" style="margin-right:0px; margin-left:0px">

  <h2 class="space">Amsterdam</h2>

  <p class="space">Amsterdam is de (titulaire) hoofdstad en naar inwonertal de grooteeuw tot stadsuitbreidingen, waaronder de laatste grachten van de fortificatie die nu als grachtengordel bekend is en in 2010 is toegevoegd aan de UNESCO-Werelderfgoedlijst.</p>

  <a class="button" href="https://www.buienradar.nl">Slecht weer</a>

  <hr>

</div>

htmlcss

Answer №1

Have you ever thought about using borders on text with padding for better control:

.box {
  background: white;
  float: right;
  position: relative
}

.space {
  padding: 15px;

}
p.space {
   border-bottom:1px solid #000;
}
img {
  max-width: 100%;
}

.button {
  position: absolute;
  bottom: 40px;
  margin-left: 15px;
}

@media (max-width:768px) {
  .button {
    position: relative;
    bottom: auto;
    margin-left: 15px;
  }
}
<div class="box">

  <img class="box" src="https://d2f0ora2gkri0g.cloudfront.net/e4/16/e4164876-1967-4303-9a57-aae00eb2b22b.png" alt="oproeien" style="margin-right:0px; margin-left:0px">

  <h2 class="space">Amsterdam</h2>

  <p class="space">Amsterdam is de (titulaire) hoofdstad en naar inwonertal de grooteeuw tot stadsuitbreidingen, waaronder de laatste grachten van de fortificatie die nu als grachtengordel bekend is en in 2010 is toegevoegd aan de UNESCO-Werelderfgoedlijst.</p>

  <a class="button" href="https://www.buienradar.nl">Slecht weer</a>


</div>

If you wish to control the width of the line more precisely, you might want to consider using a linear-gradient trick (or pseudo-element):

.box {
  background: white;
  float: right;
  position: relative
}

.space {
  padding: 15px;

}
p.space {
   background:linear-gradient(to bottom,transparent calc(100% - 1px),#000 0) 0 0/50% 100% no-repeat;
}
img {
  max-width: 100%;
}

.button {
  position: absolute;
  bottom: 40px;
  margin-left: 15px;
}

@media (max-width:768px) {
  .button {
    position: relative;
    bottom: auto;
    margin-left: 15px;
  }
}
<div class="box">

  <img class="box" src="https://d2f0ora2gkri0g.cloudfront.net/e4/16/e4164876-1967-4303-9a57-aae00eb2b22b.png" alt="oproeien" style="margin-right:0px; margin-left:0px">

  <h2 class="space">Amsterdam</h2>

  <p class="space">Amsterdam is de (titulaire) hoofdstad en naar inwonertal de grooteeuw tot stadsuitbreidingen, waaronder de laatste grachten van de fortificatie die nu als grachtengordel bekend is en in 2010 is toegevoegd aan de UNESCO-Werelderfgoedlijst.</p>

  <a class="button" href="https://www.buienradar.nl">Slecht weer</a>


</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

Reverse the order of jQuery toggle animations

Looking for something specific: How can I create a button that triggers a script and then, when the script is done, reverses the action (toggles)? (I am currently learning javascript/jquery, so I am a beginner in this field) Here's an example: ...

javascriptjqueryhtmlcssjquery-animate

Troubleshooting issue with ng-click functionality in AngularJS within an <li> element

When creating a pagination list image with AngularJS, I encountered an issue where the ng-click directive was not working when used in either an <li> or <a> tag. However, it worked perfectly fine within a <button> tag. <div ng-control ...

javascripthtmlangularjs

Implement dynamic changes to CSS variable values using Typescript during runtime

My angular 4 web application requires dynamic styling based on color values and image URLs received from the backend. While I have successfully set up the app to load images from the server, handling color values poses a greater challenge. The primary colo ...

cssangulartypescript

Ways to create an inline effect for h3 and <hr> elements, or strategies for incorporating a horizontal line following a header

Is there a way to make the H3 and HR elements appear inline? In my design, I want a horizontal line to come immediately after the title without breaking onto the next line like it currently does. <div class="row"> <h3 class="col-md-4 col-sm ...

htmlcssbootstrap-4

Tips for sharing information through a JSON array

"advertisement_types":["ATM","Banner/Poster","Stalls"] Here is the HTML code: input(type='checkbox', value='Mobile/Communication Tower', ng-model='advertisement_types') | Mobile/Communication Tower ...

javascripthtmlangularjsjson

Steps for generating a PDF using the content of an Angular view

I am working with an Angular app that utilizes ngx-charts to display graphs like the one shown below: https://i.sstatic.net/8kQef.png My current goal is to export this view, along with its graphs, to a PDF file. However, I am unsure about the best approa ...

htmlangulartypescriptpdfexport-to-pdf

Maximizing page space with ReactJS and advanced CSS techniques

I'm currently in the process of learning CSS and struggling a bit with it. My main issue right now is trying to make my react components fill the entire height of the browser window. I've been using Display: 'grid' and gridTemplateRows: ...

javascriptcssreactjs

The onsubmit() form isn't working as intended

I have developed a JavaScript function to control the required input texts in my form. However, I am facing an issue where the error message does not appear when clicking the button without filling out the required field, and it allows me to navigate to an ...

javascripthtml

Error handling for uploading a file to ClassPathResource - IOException

I am looking to upload images that are added by the admin (under a specific category) into a folder within the project directory. I have attempted to achieve this through a controller, however, it is throwing an Unhandled exception type IOException. @Pos ...

htmlspringbootstrap-4thymeleaf

Method for randomizing div elements within table cells and a separate div element

I currently have 16 div elements: HTML <table id="table1"> <tr id="tr1"> <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)"> <div id="div_content1" draggable="true" ondragstart="drag(event)"><p id= ...

javascripthtml

Comparing Products: Enhance Your Selection with Jquery to Add or Remove Items

I am looking to incorporate a "product compare feature" into the product list on my website. I am curious about how I can create a Query String URL from the product list page using jQuery, like the example below. The generated compare URL should follow th ...

javascriptjqueryhtml

Creating textNode for radio buttons using JavaScript

Need some help creating a radio button with JavaScript. While it's easy to do in HTML, like this: <input type="radio" name="sType" value="m">MALE, I've managed to create the input part with JS using <input type="radio" name="sType" value ...

javascripthtml

Scrolling to the complete height of a div using scrollTop

Experience an automated scroll to the bottom of the div, followed by a smooth upward motion over 5 seconds, all while looping seamlessly. A small issue arises where the code only recognizes the standard height set for the div, not its actual scrollable he ...

javascriptjqueryhtmlscrollscrolltop

What is the best way to add a list to a JSON array?

I'm interested in learning how to create a loop using for each and for both methods. I want to access the id "list" in order to append li elements. HTML <div id="list"> <ul> <li>Mainland China</li> ...

htmlarraysjsonappend

The functionality of Jquery to update the display styling using CSS is not functioning properly

Here is the code snippet: <script type="text/javascript> $(window).load(function(){ debugger $('#comp').ready(function() { $('#QV101').css("display", "inline"); $(' ...

jquerycssdisplay

Angular: Design dependent on attributes

Can I customize the styling of a div in accordance with a boolean property called "isActive" on my controller using Angular? <div class="col-md-3" (click)="isActive = !isActive"> <div class="center"> <i class="fa fa-calendar"& ...

javascriptcssangular

Puppeteer refrains from interacting with the element through clicking

I'm currently working on streamlining the process for viewing my grades. Unfortunately, I am encountering difficulties with clicking on the "Boletim" button as it is not responding. Here is the code snippet for the button on the website: <tabl ...

javascripthtmlinputclickpuppeteer

Conceal the top section of the navigation bar as you smoothly scroll

Hello, I recently personalized a Bootstrap navbar with 2 rows - the upper section containing just the logo and social links, and the lower section with navigation links. I have been attempting to hide the upper section when scrolling, but so far, I have no ...

javascriptcssscrollnavbartransitionend

Creating a Submenu with HTML and CSS

After trying several guides on creating sub-menus, some involving JS, I decided to attempt a CSS-only approach. Unfortunately, I have encountered difficulty in making the submenu function correctly. You can view my code on fiddle here: http://jsfiddle.net ...

htmlcss

Tips for implementing a hover effect on the background color of a Bootstrap navbar

I am having trouble changing the background color of links and social media icons when hovering over them. I've tried multiple solutions found through searching, but none seem to work for me. Could someone please assist me with this issue? Thank you! ...

htmlcsstwitter-bootstrap-3bootstrap-4