CSS can be used to create borders, vertical lines

  • Unknown's avatar
    kristibitetti · Member ·

    Question:

    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: (visible only to logged in users)

  • Unknown's avatar
    lizthefair · Member ·

    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;">
     <tr>
          <td style="padding: 5px; border-right:1px solid black;">Service A</td>
          <td style="padding:5px">$5.00</td>
     </tr>
     <tr>
          <td style= "padding: 5px;border-right:1px solid black;">Service B</td>
          <td style="padding:5px">$7.00</td>
     </tr>
</table>

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

  • Unknown's avatar
    hey19 · Member ·

    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!)

  • Unknown's avatar
    lizthefair · Member ·

    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.

  • Unknown's avatar
    designsimply · Member ·

    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.