"Ensure that the horizontal border line is properly aligned with the header div

I have a CSS-defined header with the following properties:

.page-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: stretch;
  align-items: center;
  padding: 5px 5px 5px 20px
  margin-left: auto;
  margin-right: auto;
  width: 100%
  height: 40px;
}

Below this header, there is a border div styled as follows:

.horizontal-line {
  border-bottom: 1px solid red;
  margin: auto;
}

My issue arises when trying to align the border with the header using padding or fixed margins, without losing the centered effect. How can I adjust the border to match the width of the header?

Is it possible to achieve this using only CSS? There are constraints with the JavaScript template being used, and other versions of the site based on the same template don't include the border div.

I've experimented with max-width, which works well for the full-sized version of the site. However, it doesn't dynamically adjust the max-width when the page is resized. Any suggestions or assistance would be greatly appreciated!

htmlcssreactjsalignment

Answer №1

Perhaps by including a container, you can achieve something like this: You can insert a horizontal-line div within the container and set it to full 100% width to achieve the same outcome.

.container {
  width: 60%;
  height: 300px;
  background-color: white;
  border-bottom: 2px solid black;
}
.page-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: stretch;
  align-items: center;
  padding: 5px 5px 5px 20px
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 200px;
  background-color: yellow;
}
<div class="container">
  <div class="page-header"></div>
</div>

Alternatively, setting % on max-width will allow for resizing when the screen is adjusted, although using a container around it might be more visually appealing.

.page-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: stretch;
  align-items: center;
  padding: 5px 5px 5px 20px
  margin-left: auto;
  margin-right: auto;
/*   width: 100%; */
  max-width: 50%;
  height: 200px;
  background-color: yellow;
}

.horizontal-line {
  max-width: 50%;
  margin-top: 50px;
 border-bottom: 2px black solid;
}
<div class="page-header"></div>
<div class="horizontal-line"></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

Acquire feedback from PHP using SweetAlert notifications

I need to update my HTML form to function like this: <script> function getName() { var name = $('#name').val(); var url_send = 'send.php'; $.ajax({ url: url_send, data: 'name=' + name, ...

javascriptjqueryhtmlajaxsweetalert

The secret to achieving perfectly even spacing along the vertical axis

I'm working on a card design that contains a div with 3 elements - 2 headers and a paragraph. I need to ensure there is consistent spacing between each element and the top/bottom of the card. Currently, there seems to be too much margin after the last ...

htmlcss

What are some ways to make the search bar on my website smaller in both length and width?

I have a WordPress website with the ivory search plugin installed for the search functionality. You can check out my website at www.osdoc.in. I am looking to make the search bar shorter and narrower as it is currently causing the menu icons to encroach on ...

csswordpresswordpress-themingcustom-wordpress-pages

Use jQuery to retrieve the response from a JSON request and showcase it on the existing HTML page

Currently, I am working on a project that involves integrating a JSON-based web service from a remote server. The method of this service can be accessed by using specially formatted URLs such as: http://root-url/ws/service-name?request={json-string} The ...

javascriptjqueryhtmlajax

Creating a visually engaging parallax effect in two columns with differing lengths that align perfectly at the conclusion

Recently, I came across an interesting layout technique on Apple's website that involves two columns with different lengths. As you scroll down the page, one column slows down to align with the other so that they both meet at the bottom. You can chec ...

jquerycsshtmltwitter-bootstrapparallax

Shade of a row within a PHP table

I have a table that is populated with data from a database. Is there a way for me to dynamically change the color of a row based on certain conditions from a JSON file? For example, if the temperature exceeds a set minimum value, I want to highlight the ro ...

phphtmlcss

I am experiencing difficulty getting Bootstrap Columns to appear next to each other despite trying numerous solutions

Check out this code snippet: <div class="mainptext"> <h3><strong>Master the following:</strong></h3> <div class="container"> <div class="row"> <div class ...

cssbootstrap-4

Ways to retrieve a JSON element and incorporate it into a CSS styling

Can someone assist me in converting a JSON object for use in CSS? I've attempted to do this using Vue.js, creating a map legend with v-for to generate the legend. However, if there is an alternative method that allows me to take a JSON object and ins ...

javascripthtmlcssjsonvue.js

Issue with MUI toggle switch not updating display and value upon clicking once

I'm currently experiencing issues with a Material UI toggle switch in my project. Initially, when the component loads, the console log displays the correct value. However, when I toggle the switch from 'yes' to 'no', the visual cha ...

javascriptreactjsmaterial-ui

What steps can I take to streamline and simplify this tab controller code?

I'm looking to simplify this jQuery code because I feel like there's repetition. As someone new to JavaScript and jQuery, I've created two tabs with their respective containers containing miscellaneous information. My goal is to have each co ...

javascriptjquerycsstabs

Adjusting the size and adding ellipsis to the <td> component within a table

How can I set a fixed width for td elements in a table and use text-overflow: ellipsis to truncate the text inside the cells? I have attempted various methods without success. Can someone provide guidance on how to achieve this? <table> <tr& ...

htmlcsshtml-table

Using a clipping path with video elements in HTML

I am facing an issue with the clip-path property in Safari browser when using it with a video tag. It works fine in Chrome and Firefox, so I believe Safari should support it as well. However, there might be some bugs in my code causing this problem. Any ad ...

reactjssvgsafariclip-path

IE9: Enforce the browser and document modes of IE9

Currently in IE9, my webpage is rendering with the Browser Mode set to 'IE9 Compat View' and Document Mode as 'IE standards', causing issues with all canvas elements on the page. I have already ensured that I have included '' ...

htmlinternet-explorer-9

Preserving content following the use of jQuery's fadeIn/fadeOut methods

I have a jQuery function that fades in and out a sprite (sprite without text) from one background to another, and it's working as intended. However, this function is also fading out the text within an element. HTML: <div id="menu"> <ul c ...

jquerycssfadeinfadeout

Attach the keyboard to the screen in a fixed position

How can I keep the keyboard always visible on the screen? The screen contains: one TextInput (multiline) two FlatList Typing in the TextInput is fine, but when interacting with the FlatList, the keyboard disappears. I want the keyboard to remain visib ...

javascriptreactjsreact-native

Show an image within a textview using the <img> tag in HTML

I'm trying to show an image in a textview using HTML. I have placed the image at res/drawable/img.png and here is the code I am using: String img="<img src='file:///res/drawable/img.png' />"; txt_html.append(Html.fromHtml(img)); Howe ...

javaandroidhtml

The hover effect generates a flickering sensation

I am having trouble displaying options on an image when hovering over it, as the displayed options keep flickering. $('a').hover(function(event) { var href = $(this).attr('href'); var top = $(this).next().css("bot ...

javascriptjqueryhtmlasp.netcss

Ways to incorporate a tertiary tier in my CSS dropdown navigation

I currently have a CSS code that displays a two-level menu, but I'm looking to expand it to include a third level. Unfortunately, I'm stuck and unsure of what changes to make in the CSS. Below is the existing code: #topnav{ // Existing CSS p ...

phphtmlcssweb

conceal the offspring from the guardians, not the offspring

Could you please assist me with this situation... <li id="4331">Region <ul> <li id="4332">Asia</li> <li id="6621">Europe</li> </ul> </li> I have a query when I click on the Reg ...

jquerycssajax

Customizing the appearance of nested icons in material-ui

I'm currently utilizing material-ui for my application. Issue arises when attempting to modify the color of the nestedIcon in the drawer with my custom theme. Is there a method to change this color? If so, how can it be done? The same issue is prese ...

reactjsmaterial-ui