Mohamed Mohamed - 3 months ago 12
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?



#artworkArticlesLeft{
float:left;
margin: 0;
padding:0;
width:60%;
padding-left:10%;
padding-right:4%;
border-left:

}

#artworkArticlesRight{
padding-right:10%;
}

.verticalLine{
background:black;
width: 0px;
height: 10%;
}

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




Answer

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.