CSS can be used to create borders, vertical lines

  • Author
  • #1921589


    I’d like to create two columns on one of my pages. One with services, and directly next to that, prices. I’d like to use a vertical line to separate the columns. I’d like to be able to line up the text (as if I were using tabs.)

    I think I can do this with CSS. The thing is — I’m using a responsive design and so when I create a line, it moves all over the page. And I am not sure how to create a second column so that the services line up properly with prices. Like this, but with a solid vertical line.

    Is this simple to do? I’ve been searching and not sure if I should be creating a table or if I can just use tags to make the page render the way I wish.

    Service A | $5.00
    Service B | $7.00

    The blog I need help with is artistryinhanover.wordpress.com.



    If you just need one page to have the two columns as you describe, I would use the text editor tab on that page to build a table. Have you done that before?

    If not, this should help: http://www.w3schools.com/html/html_tables.asp

    Basically, to recreate your example the code would be:

    <table style="border-collapse:collapse;">
              <td style="padding: 5px; border-right:1px solid black;">Service A</td>
              <td style="padding:5px">$5.00</td>
              <td style= "padding: 5px;border-right:1px solid black;">Service B</td>
              <td style="padding:5px">$7.00</td>

    I’m pretty sure this isn’t the most elegant way to get this done, but it should work.



    Thank you! Actually, we wound up using that same site W3schools.com and with a whisper from a friend, learned about the float command.

    <div style=”float: left; width: 250px; margin-right: 5px;”>Women’s Cuts</div>
    <div style=”float: left; width: 250px; margin-right: 5px;”>$40+</div>
    <div style=”clear: both;”></div>

    This essentially created two columns. It was a tad tedious, but it worked out really well. Still haven’t figured out how to get the vertical line in properly (because with responsive design, it has to move!)



    Cool. Building on that idea, you could try this to get the line in:

    <div style= "float:left; width: 20%; border-right: 1px solid black;"><p>offering 1</p><p>offering 2</p></div>
    <div style="float: right; width: 70%; padding: 5px"><p>price 1</p><p>price 2</p></div>

    This might be a little less tedious as you only have to do the div stuff once for each column. Then just add your data as paragraphs.


    Just to add one more opinion to the mix, I think tabular data such as what you described is exactly what table HTML is for.

    Service A | $5.00
    Service B | $7.00

    But either of the methods mentioned earlier will work.

The topic ‘CSS can be used to create borders, vertical lines’ is closed to new replies.