Creating a wider bottom border than the div width with CSS

Currently, I am customizing a blog theme and I am aiming to add a subtle separation between each individual post using a thin line. The challenge lies in the fact that each post is centered and has a width of 800 pixels. As a result,

.post {
  background: #fff;
  margin: 40px auto;
  width: 800px;
  padding-bottom: 40px;
  border-bottom: 1px solid grey;
}

This code snippet creates a neat border at the bottom of each post.

However, since the post <div> is limited to 800 pixels in width, the border will also span 800 pixels and be centered underneath the post. I am seeking a solution to achieve a separator that spans the entire screen without adjusting the div's width to 100%. Any suggestions?

htmlcss

Answer №1

If your .post is not positioned relatively, you can achieve this:

html {
  width: 100%;
}

.post {
  background: cyan;
  margin: 40px auto 80px;
  width: 400px;
}

.post::after {
  position: absolute;
  left: 0;
  content: " ";
  display: block;
  height: 40px;
  border-bottom: 1px solid grey;
  width: 100%;
}
<div class="post">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit perspiciatis ipsam necessitatibus repudiandae molestias soluta possimus rerum cum. Veritatis pariatur harum est assumenda nemo voluptas distinctio cum adipisci error voluptatem!</div>
<div class="post">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit perspiciatis ipsam necessitatibus repudiandae molestias soluta possimus rerum cum. Veritatis pariatur harum est assumenda nemo voluptas distinctio cum adipisci error voluptatem!</div>

Check out the original JS Fiddle link.

Answer №2

Instead of using a border-bottom property, try using :after pseudo-element instead.

For example:

.post {
       background: #fff;
       margin: 40px auto;
       width: 800px;
       padding-bottom: 40px;
       /*border-bottom: 1px solid grey;*/
    }
.post:after {
    content:"";
    display:block;
    border-bottom:1px solid #000;
    height:0px;
    width:820px;
    position:relative;
    left:-10px;
}

Notice the increased width and adjusted left positioning.

Answer №3

Try using an <hr> tag to create a simple separator.

For a demonstration, you can check out this demo fiddle.

Using the <hr> tag will automatically create a separator that spans the entire screen width, eliminating the need for setting the width of the <div> element to 100%. Plus, you won't have to worry about positioning properties or browser support.

Update

If you're not concerned about ancient browser support, you can create a full-width separator using the vw unit and CSS pseudo elements. Here's an example:

html

<div class='demo'></div>

css

.demo {
 position:relative;
}
.demo::after {
 content:"";
 display:block;
 box-sizing:border-box;
 position:absolute;
 left:-50%;
 bottom:0;
 width:100vw;
 border-top:1px solid black;
}

View Updated Demo

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

What is the method for tallying CSS page breaks in printed HTML documents?

Currently, for my report generation process using HTML and CSS to manage page breaks dynamically. I've enabled the option for users to print multiple reports at once by combining them into different sections within a single HTML document. This helps p ...

javascripthtmlcssprinting

Display a custom dropdown menu depending on the value chosen from a separate dropdown menu

There are three dropdown lists, each enclosed in its own DIV container. The DIV containers are named fromCity, WithinStateLimits, and OutOfState. The goal is to use the jQuery script below to hide the other two DIVs when a user selects an option from the ...

javascriptjquerycssasp.net

Discovering a sophisticated way to locate a span element using the not(p) selector in Selenium

Within a span element with an ID, there is a mixture of text and a paragraph tag. The goal is to use selenium webdriver to pinpoint the street address in the mix below: <span id="myspan"> <p>fullname</p> street address - has no ...

javahtmljquery-selectorsselenium-webdrivercss-selectors

Calculating JS functions before images are loaded

Following up on a previous question, I am utilizing JavaScript code from another article to position a "content" div relative to a fixed div in my project. However, the issue arises when the positioning of the "content" div is calculated only after all the ...

javascriptjqueryhtml

Navigate directly to the section on the page that discusses the hashtag

So, I have a unique scenario to address. I'm working with two div elements where only one should be visible at a time. Here's the situation: The first div serves as an introduction page with a button that hides it and reveals the second div. Th ...

javascriptjqueryhtmlhashtag

The alert dialog does not appear when clicking on "a"

Attempting to retrieve the ID of the clicked element using jQuery has proven unsuccessful for me. Below is the jQuery code I am working with: <script> $(function(){ $("a.step").click(function(){ var id = $(this).attr('id'); ...

jqueryhtml

Implementing a login system on my website using HTML - a step-by-step guide

https://i.sstatic.net/9hOx6.png ...

javascriptphphtmlcssauthentication

Which is better for parsing HTML - CSS or XPath selectors?

For my project, I aim to utilize lxml for parsing HTML content, as it offers support for both XPath and CSS selectors. I am currently deciding whether to bind my model properties to either CSS or XPath. I am contemplating which option would be most benefi ...

htmlcssparsingxpathcss-selectors

Tips for preventing changes to the HTML code using the inspect tool

Seeking to prevent recommended videos from appearing when pausing or ending a YouTube video, I resorted to a CSS and JS modification. I successfully placed an image over the video during these events, achieving the desired outcome. However, upon inspectin ...

htmljquerycssyoutubeyoutube-api

Is AngularJS governed by a distinct set of guidelines for ARIA implementation?

I am currently working on updating a website to ensure compliance. The site is predominantly built using AngularJS, which I am still in the process of learning. I encountered an interesting situation where there is a label targeting a div element without a ...

htmlangularjslabelwai-ariawcag2.0

What could be causing the "function undefined" error in my HTML document?

Recently, I developed a small chat application that initially functioned well with all code contained in one HTML document. However, after separating the CSS, HTML, and JS into individual files, an issue arose when invoking the register_popup function from ...

javascriptjqueryhtmlajaxdjango

Ways to deactivate an individual menu option?

Here I am with another query related to Webix. I am attempting to deactivate a single menu item, but the onItemClick function for the submenu is still active. Check out my code snippet below: webix.ui({ view:"menu", id:'menu', data:[ ...

javascripthtmldrop-down-menumenuwebix

How can JQuery be utilized to extract the information stored in the "value" parameter of a chosen option?

I have a dropdown menu that dynamically populates its options with numbers. Here is the code for that: <select name="TheServices" id="services-selector"> <option value="" disabled selected hidden>Static Select ...

javascripthtmljquery

Troubleshooting Z-Index problem with Material UI Drawer component on iOS

I'm currently working on a project that involves the use of the Material UI Drawer component. However, I've encountered a specific issue when using an iPad, which presents two main problems: - The overlay does not appear above the navigation bar ...

ioscssz-indexmaterial-uidrawer

Navigation is failing to float in the correct position

Having issues with my navigation positioning, specifically when it reaches the breakpoint. There's a strange gap on the right side that I can't seem to fix by adjusting padding or margin settings. I'm relatively new to this so please bear wi ...

htmlcss

What is the best way to apply CSS to my HTML code?

I have the files stored within my Django project. My directory structure for templates looks like this: |base.html | |rules | |style_base.css In my base.html file, I link to the stylesheet like this: <link type="text/css" href="/rules/style_b ...

htmlcssdjango

Angular2 Components with Unique Styling

I am working on an Angular2 app that includes several components, some of which I want to reuse multiple times on a single page. Instead of having three separate components, I am looking to refactor and combine their functionalities into one. The basic st ...

htmlcssangularangular2-template

Having trouble with the Tap to copy discount code function not working in the Shopify cart drawer?

Our goal is to implement tap to copy functionality for code snippets on our Shopify website. It works seamlessly on the product detail page, but in the cart drawer, it only functions properly after the second page load. https://i.sstatic.net/xzMVY.png ...

javascripthtmljqueryajaxshopify

I am currently working on incorporating dropdown menus using Bootstrap 5 in my project

<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="/dropdownmenus/contenido/5.company.html" id="navbarDropdownCompany" role="button" data-bs-toggle="dropdown" aria ...

javascripthtmlcssbootstrap-5

The backdrop of the Bootstrap modal popup refuses to disappear

Currently, I am working on building an app using Bootstrap and AngularJS. I have integrated a Bootstrap modal popup for the content while other pages are loaded into ng-view. The issue I am facing is that when the content displayed in ng-view contains the ...

javascriptcssangularjstwitter-bootstrap