Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

Drawing a line to separate column divs in html and CSS

Edrol97

Silver Coder
Hi all, appreciate your help as always. I'm currently thinking about how to draw a line between columns in html and css. How do I do this? The line would be similar to how an old newspaper might look. Thanks. Image of what I've currently made below.
 

Attachments

  • Screenshot 2024-04-28 at 20.35.30.png
    Screenshot 2024-04-28 at 20.35.30.png
    2.1 MB · Views: 4
Can you show your HTML and CSS for this?
Are you using the CSS columns property? Or is each column is a separate element?
CSS:
.column {
    float: left;
    width: 300px;
    padding: 0 15px;
  }

The coding i have for this particular section in css is above and html is below.

HTML:
<div class="column">
<h1>Tories in Tatters</h1>
<h1>Chaos in the Tory Party continues long after the anarchical policies of Liz Truss and her crashing of the pound. Rishi Sunak seems intent on destroying Tory 
  credibility assuming they had any in the first place. 
  <img src="img/Nothing to see here.png"width="300px">As the Frank Hester row continues with the Conservative Party after they have so readily portrayed Labour
  as being a racist party over antisemitism, it is now clear that the real racist party is the one ironically with an ethnic minority leader. 
</h1>
</div>
<div class="column">
  <h1>General Perplection over General Election</h1>
  <img src="img/Mayday%20Maynay!.png" width="400px">
  <h1>When's Rishi gonna call it. He has to do it sometime and as Labour now has the same amount of MPs that it had in 2019 after having suspended several of its members
    over antisemitism charges, the Tories look in real trouble. 
  </h1>

</div>
</script>
</div>
 
So each column is it's own div element with the column class?
If that's the case, then you can use a right and/or left border to add a line in between each column.
For example:
CSS:
.column:not(:last-child) {  /* exclude last child as there is no column to the right of it */
  border-right: 1px solid black;
}
 

Buy us a coffee!

Buy me a coffee.
Back
Top Bottom