All geek questions in one place

Partial Border in CSS

I have two divs with borders as shown in the image below.

enter image description here

How to remove only the border on which 2 divs are displayed, as shown in the image below?

enter image description here

Here is the html and css used in the top image (js fiddle: http://jsfiddle.net/paulyoder/whsC4/19/ )

<html> <head> <style type="text/css"> #sideBar { float: left; width: 75px; height: 50px; border-top: 1px solid black; border-left: 1px solid black; border-bottom: 1px solid black } #balanceSheetSummary { float: left; width: 150px; height: 150px; border: 1px solid black; } body { padding: 10px; } h2 { margin: 5px; } </style> </head> <body> <div id="sideBar"> <h2>Side Bar</h2> </div> <div id="balanceSheetSummary"> <h2>Content</h2> </div> </body> </html>
+4
source share
2 answers

You can do something like this: http://jsfiddle.net/sj2AD/1/

 #sideBar { float: left; width: 75px; height: 50px; border-top: 1px solid black; border-left: 1px solid black; border-bottom: 1px solid black; background: red; position: relative; z-index: 2; } #balanceSheetSummary { float: left; width: 150px; height: 150px; border: 1px solid black; background: red; position: relative; z-index: 1; margin-left: -1px; } body { padding: 10px; } h2 { margin: 5px; }

I did to add a negative margin to the right so that the fields overlap.

This breaks, for example, if the left div is higher than the right.

+11
source

check this

http://jsfiddle.net/whsC4/17/

+3
source

Source: https://habr.com/ru/post/1384341/

More articles:


All Articles