Tips for designing divs with vertically centered meeting borders:

Here is the progress I've made so far: http://jsfiddle.net/F8An4/

I am attempting to achieve a design where there are borders on each side of the div, perfectly centered vertically and pointing towards the left and right sides of the screen. This style is quite common, but I am struggling to implement it successfully!

The desired look would be:

-----|DIV|------

CSS

div {
    background: lightgreen;
    height: 100px;
    margin: 0 auto;
    position: relative;
    width: 200px;
}   

div::after {
    border-right: 10px solid black; // I'm unsure about this part.
    content: "";
    top: 0; left: 0; right: 0; bottom: 0;
    position: absolute;    
}

div::before {
    content: "";
    top: 0; left: 0; right: 0; bottom: 0;
    position: absolute;    
}

Any suggestions or solutions?

htmlcss

Answer №1

To create this design, you'll require two wrapping containers: an inner div to contain the content and an outer div:

<div class="outer">
    <div class="inner"></div>
</div>

For styling, keep it simple — ensure the outer div has a width of 100% (allowing the pseudo-element to expand across the full width) while the inner div can be given a specific width later on.

.inner {
    background: lightgreen;
    height: 100px;
    margin: 0 auto;
    width: 200px;
}
.outer {
    position: relative;
    width: 100%;
}
.outer:before {
    border: 1px solid #000;
    box-sizing: border-box;
    content:"";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

The CSS transform property is crucial for achieving perfect vertical alignment of the pseudo-element, especially when dealing with thick horizontal lines.

If you prefer using odd-numbered dimensions for the horizontal line, you can opt for specifying the height of a single border like border-top: 1px solid #000;, or omit the border property altogether and set the height along with a background-color. Both approaches yield the desired result :)

Check out this code in action on JSFiddle!

[Edit]: The bottom margin on the outer div is unnecessary for the functionality of the code — feel free to remove it ;)

Answer №2

FIDDLE

Here is an example of HTML and CSS code:

<div><span>TEXT</span></div>

CSS Code:

div {
    margin-top:10px;
    height: 1px;
    border-top: 1px solid black;
    text-align: center;
    position: relative;
}
span {
    position: relative;
    top: -.7em;
    background: lightgreen;
    display: inline-block;
    border-width:0 2px;
    border-color:black;
    border-style:solid;

}

Answer №3

Do you think this meets your needs?

http://jsfiddle.net/F8AN4/6/

I believe there might be a more elegant solution out there, so if anyone has any better ideas, feel free to share :)

<div id="main">
    <div class="hrleft"></div>
    <div class="mid"></div>
</div>

div.hrleft {
    height: 45px;
    width: 200px;
    border-bottom: 10px solid black;
    float: left;
}

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 PHP, loop through three arrays to generate a table with three columns

Looking to build a dynamic table with HTML and PHP showcasing different arrays in each column. Three columns are needed. <table class="table-styling"> <tr> <th>Column 1</th> <th>Col ...

phphtml

Adjusting the size of FontAwesome symbols using FitText

I recently started using FitText () to dynamically resize certain titles on my webpage. While I've had success with resizing h1, h2, and other text elements, I've run into an issue when trying to apply it to fontawesome icons. I know that FitText ...

jqueryhtmlcss

Accessing user input upon button press

I am facing a challenge in displaying my emailInput on my createPassword page, specifically where [email protected] is mentioned. I have provided the code snippets for both pages below, the email page containing a user input and the password page wher ...

javascripthtmlcssreact-native

The website is failing to extend and reveal content that is being concealed by jQuery

I'm currently diving into the world of Javascript and jQuery, attempting to create a functionality where upon clicking the submit button, the website dynamically expands to display search information. Although the feature is still in progress, I am ut ...

javascriptjqueryhtmlcss

The MUI component with hideBackDrop={true} is preventing me from clicking outside of the Drawer component to close it

I implemented a Drawer component which opens when an icon on the Map is clicked. The drawer menu appears along with a backshadow that drops over the map. Interestingly, clicking on the map while the backshadow is displayed closes the drawer without any i ...

cssreactjsmaterial-uimui-datatablemui-x

Adjust the size and positioning of SVG elements within a flexbox layout

I am attempting to create a flexbox with an SVG element as a child. The goal is for the SVG element to be as large as possible in terms of both width and height. .grid { display: grid; grid-template-columns: 2fr 2fr 2fr; gap: 1em; } .parent { asp ...

csssvg

Utilize AngularJS to compare and eliminate duplicate elements between two lists

Two lists are causing me trouble: List1 = ['option1','option2','option3','option4','option5','option6','option7']; List2 = ['option3', 'option4', 'option7&ap ...

javascriptarraysangularjshtmllist

Tips for displaying multiple videos on an HTML webpage

I am trying to set up a video player for videos in 720p resolution (1280x720) with autoplay and looping so that once one video ends, the next one from an array will start playing. However, I am encountering issues where the first video does not autoplay an ...

javascripthtml

Exploring JavaFX and FXML TreeTableView customization for column and header styles

I've been working on a JavaFX project and I'm having trouble customizing the style of the TreeTableView header or columns, like changing the color, width, font size, etc. I've tried using various codes like these but none seem to work. ...

cssjavafx-8fxml

Chrome has a tendency to cut off page contents in print preview, unlike other browsers that do not have this issue

My current version of Chrome browser (54.0.2840.59) is exhibiting a strange behavior when attempting to print preview an HTML page I have developed. The print preview truncates the page content, displaying less than what should be shown. The content is not ...

htmlcssprintingprint-preview

Toggling Selected Items with Jquery Show/Hide Feature

Is there a way to toggle the visibility of selected items in the mobile menu? For instance, when I click on the menu toggle, I would like all the items in the Div class sidebar to be displayed but any content within its child div with class="sticky" shoul ...

javascriptjqueryhtmlcsstoggle

Preventing checkbox selection with CSS

Can CSS be used to deactivate clicks on checkboxes while still maintaining their functionality for dynamically setting values using Javascript? I have not been able to find a suitable solution. pointer-events:none Unfortunately, this did not work as expe ...

htmlcsscheckbox

Waiting for jQuery to load until the entire document is fully loaded

When working on my web application, I encountered an issue with loading a large document into an iframe. This document contains important information that affects the title, buttons, and text displayed on the page. I want to display an animated gif in thre ...

jqueryhtmliframe

Opting for <button> over <a>

I am currently working with ReactJS in conjunction with a Bootstrap Nav Bar. Bootstrap utilizes an <a> tag for the navigation buttons. I am aiming to have the buttons scroll down to a different component on the page without resorting to using an href ...

javascripthtmlcssreactjsbootstrap-4

Choosing the content within a div and inserting it into an email

I have an email sender feature on my website where users can fill out input fields and hit send, resulting in me receiving an email. The text from all the input boxes is included in the email body. Additionally, there are some generated texts in divs with ...

javascriptphphtmlformsemail

Can the loaded image from the css sprite be displayed on the screen?

My webpage is designed to load two images from a CSS sprite using the following code: <html> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body> <div class="arrow low"></div> ...

htmlcssimageprinting

Disable the moving of the DIV button with a left-margin of 0px

Having a bit of a challenge here. I'm attempting to craft my own slider using jQuery along with some css and javascript. I've managed to get my slider functioning, moving a Div 660px to the left and right upon button clicks. However, I'm h ...

javascriptjqueryhtmlcss

The Battle of Semantics and Manipulating the DOM

How do you feel about using semantic markup versus DOM manipulation? Consider this example where there is an error message displayed under a field: <label for="email">Email:</label> <input type="email" name="email" id="email"> <div c ...

javascripthtmlperformancesemanticsuser-experience

Is it possible to access an external website by clicking on a link within a DIV element?

I have a basic website set up like this sample.php <html> <head></head> <body> <a id="myLink" href="http://sample.com">Click!</a> </body> </html> I displayed this website within a DIV-Container on a ...

javascriptphpjqueryhtmlcss

Using Vuetify: adding an asterisk to indicate required fields

The most recent update of Vuetify (v1.3 - ) has brought a significant change. Now, the asterisk is no longer automatically added to the label when using v-textarea/v-text-field with the required prop.. You will need to include it manually in the label pro ...

htmlcssvue.jsvuetify.js