Guide to adding an additional border within a div element

In my HTML document, I've created a div element with a border:

.box {border: 1px solid black; width: 100%; height: 200px}

<div class="box"></div>

Now, I'm looking to enhance this div by adding a second vertical line that will divide the box in half, positioned 30px from the left edge of the box:

  30px     remaining width
____________________________
|      |                    |
|      |                    |
|      |                    |
|______|____________________|

I have been exploring CSS3 properties and pseudo-elements but haven't found a solution to achieve this effect yet. Any suggestions or solutions would be greatly appreciated!

Thank you!

css

Answer №1

Click here for a live demonstration and learn how to implement CSS pseudo elements

.box {border: 1px solid black; width: 100%; height: 200px ;position:relative;}
.box:before{
    position:absolute;
    content:'';
    width:30px;
    height:100%;
    border-right:1px solid black;
    left:0;
    top:0;
}

In addition, you can also utilize box-shadow by checking out this demonstration

.box {
border: 1px solid black; 
width: 100%; 
height: 200px ;
position:relative; 
box-shadow:inset 30px 0 0 white, inset 31px 0 0 black
}

Answer №2

A solution to this is using a pseudo element:

.container {border: 1px solid black; width: 100%; height: 200px; position:relative;}
.container:after {content:'';
    display:block;
    position:absolute;
    width:30px;
    border-right: 1px solid black;
    top:0;
    bottom:0;
}

http://jsfiddle.net/nwvb22rg/

Answer №3

.container:after{content:''; 
            display:block;
            position:absolute; 
            height: 250px; 
            border-left: 1px solid #333; 
            margin-left:50px}

http://jsfiddle.net/p92ah3ft/

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

The scroll bar is acting peculiarly when the height is adjusted

I need assistance creating a chat widget that has a maximum height for the entire chat and allows the content to fill in without specifying fixed heights within the chat itself. Below is my code: HTML <section class="boxlr-chat"> <div class= ...

htmlcss

Is there a way to initiate an Edge animation when an onclick event occurs?

I am interested in incorporating an interactive Adobe Edge animation that activates upon the click of a conventional HTML form button. Could you please guide me on how to achieve this? ...

cssonclickhtml5-animationadobe-edge

javascript An interactive accordion component created with Bootstrap

I have been searching for a solution to create an accordion-style collapsible set of panels where the panels remain separate and do not have headers. I want buttons on one side, and when clicked, a panel is displayed on the other side. Only one panel shoul ...

javascriptjqueryhtmlcsstwitter-bootstrap

Having trouble getting the jQuery toggle function to work properly with div elements

I'm struggling with some divs that are not behaving as expected. When I click the button, it opens and changes the text to "Collapse", but when I click it again, it doesn't change the text back to "Find Support". Additionally, if I click on a dif ...

jqueryhtmlcss

Issue with nested grid layouts within the 960 grid system

I recently started working on a personal hobby website and decided to utilize the 960 css grid system for organizing my HTML elements on the page. After grasping the basic concept, I went ahead and created a preliminary version of the website, which is ho ...

css960.gs

Guide on organizing items into rows with 3 columns through iteration

Click on the provided JSFiddle link to view a dropdown menu that filters items into categories. Each item is stored as an object in an array for its respective category. Currently, all items are displayed in one column and I want to divide them into three ...

javascriptjqueryhtmlcsstwitter-bootstrap

disable border-collapse styling in ASP.NET DataList

Currently, I am new to the world of ASP.NET and I am facing a challenge in styling a DataList. Lately, I have developed a fondness for rounded corners on borders, and I am attempting to incorporate this effect into all my pages by implementing it across al ...

asp.netcssdatalist

How to make a seamless full-width background with CSS

I'm in the process of developing a new website called WebSpace and I'm looking to extend the header background color to span from one end to the other. Currently, the layout appears like this: I want to eliminate the unnecessary white space on t ...

htmlcssbackground-color

Open the HTML file for this multi-tabbed AngularJS webpage

I stumbled upon this jsfiddle demo code that offers multiple tabs for a single AngularJS webpage. http://jsfiddle.net/helpme128/99z393hn/ I decided to integrate it into my own project. I specifically wanted one tab to load a particular webpage called my- ...

javascripthtmlcssangularjstabs

Ensure that the final item in the flexbox is centered, rather than the initial one

Is there a way to align the last element in the center without affecting the first one? The code snippet below demonstrates how this can be achieved: .impress-profiles { .flex() //less mixin for flexbox flex-flow: row wrap; justify-content: c ...

cssflexbox

Bootstrap navigation bar unresponsive on mobile devices

<nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark"> <a class="navbar-brand" href="#">Yehee-Lounge</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav ...

htmlcsstwitter-bootstrapbootstrap-4

What could be the reason for the image not aligning to the middle with vertical-align?

I'm facing an issue with the alignment of images on my website. The images are currently displayed from the top, but I would like them to be aligned in the middle vertically. However, using the 'vertical-align: middle' property on the images ...

htmlcssbootstrap-4

Core-pages with polymer core have no set height limit

I am embarking on my first project using Polymer. I have implemented core-pages to facilitate navigation between different pages. However, I am facing an issue where the pages are not displaying with a white background-color as intended in the css. You ca ...

htmlcsspolymer

What is the best way to ensure an element reaches its full height limit without triggering the need for page scrolling?

Can you help me with a dialog box issue I am facing? $(document).ready(function() { $('.ui.modal').modal('show'); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link hr ...

cssflexboxheight

Problem with Firefox full screen slider

Welcome to my website where I have created a full-screen slider for you to enjoy. If you'd like to check it out, just click on the website link. The slider functions perfectly on Chrome and IE, but unfortunately on Firefox, it only shows half of the ...

htmlcsswordpressfirefox

Is there a way to control the visibility of two divs depending on which one a user hovers on?

Having two stacked div elements containing images, I want the div with id = "features3_HDS_image" to become visible when a user hovers over the div with id = "HDS_Blurb", and the div with id = "features3_FH_image" to be displayed when hovering over the div ...

jqueryhtmlcss

Utilizing jQuery's CSS function to adjust the "left" margin of multiple div elements

I am working on creating a menu bar that will be displayed at the top of my page. Each section of the menu will be a link to a different part of the page. $(document).ready(function() { var w = window.innerWidth || document.documentElement.clientWid ...

javascriptjqueryhtmlcss

Find the final element that does not include a particular class

Looking for the best way to identify the last item in a list without a specific class? Learn how to write code that can check for the absence of a class name. $('ul li:last') $('ul li:not(.special)') ...

jquerycss

Formatting won't assist in aligning Facebook button

I am currently working on a page that includes a div with a Facebook recommend button. In order to style the Facebook code, I enclosed it with this formatting: <div style="align:center"> <div id="fb-root"></div> <script src=" ...

htmlcss

dynamic webpage resizing using html and css

Looking for a way to make my SharePoint window automatically resize when the user changes their browser size. I'm using the web version of SharePoint at work and don't have access to Designer. <style type="text/css"> #dgwrap { HEIGHT: ...

htmlcsssharepoint