CSS can be used to create borders, vertical lines

  • Author
    Posts
  • #1921589

    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 artistryinhanover.wordpress.com.

    #1921862

    lizthefair
    Staff

    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.

    #1921879

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

    #1921880

    lizthefair
    Staff

    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.

    #1921909

    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.