Mohamed Mohamed - 1 year ago 97
CSS Question

How to make vertical line between 2 articles?

Hello Guys I am trying to make a padding in between my 2 articles with a vertical line but every time I try to make it, it just doesn't show the line at all because I set my background of page blue, so how can I bypass my background to set the line to black so it shows over the background. Anyone got an idea?

margin: 0;



width: 0px;
height: 10%;

<section id="section1">
<div id="artworkArticlesLeft">
<article id="artworkArticle1">
<h1>Art Work</h1>
<p>Welcome to the main gallery</p>
<div id="artworkArticlesRight">
<div class="verticalLine">
<article id="artworkArticle2">
<p>Welcome to the main gallery</p>

Answer Source

You can make a line by using border property on a container with an article. Use either border-right: 1px solid black on first container (artworkArticlesLeft) or border-left: 1px solid black on second container (artworkArticlesLeft).

With your current styling this might not look so great as there are some positioning issues with second container (it's width is 100% of page - see in browser's element inspector). You might want to consider adjusting positioning of the components or using display: flexbox.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download