Help creating two short columns of text, please

Discussion in 'HTML & Website Design' started by chrisj, Aug 13, 2007.

  1. #1
    I'd just like to split some text up into two short columns, separated by a vertical line, in the middle of full lines of text like so:


    text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text

    text text text text text text text text l text text text text text text text
    text text text text text text text text l text text text text text text text
    text text text text text text text text l text text text text text text text
    text text text text text text text text l text text text text text text text

    text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text

    Can you help me with this?

    thanks.
     
    chrisj, Aug 13, 2007 IP
  2. twistedspikes

    twistedspikes Notable Member

    Messages:
    5,694
    Likes Received:
    293
    Best Answers:
    0
    Trophy Points:
    280
    #2
    Something like this maybe?

    Inside the body:

    
    <div id="col1">
    column 1
    </div>
    <div id="col2">
    column 2
    </div>
    Code (markup):
    Inside the style sheet (change to what you want):

    
    div#col1
    {
    border-right:1px black;
    width:300px;
    float:left;
    }
    
    div#col2
    {
    border-left:1px black;
    width:300px;
    clear:both;
    }
    
    Code (markup):
     
    twistedspikes, Aug 13, 2007 IP
  3. chrisj

    chrisj Well-Known Member

    Messages:
    606
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #3
    Thanks for your code.

    I applied it and this is what i see on my web page:

    column 1
    column 2

    How can I change it so the columns are side by side not above and below?

    And how can I put a vertical line inbetween them/

    thanks.
     
    chrisj, Aug 13, 2007 IP
  4. jakomo

    jakomo Well-Known Member

    Messages:
    4,262
    Likes Received:
    82
    Best Answers:
    0
    Trophy Points:
    138
    #4
    maybe

    div#col2
    {
    border-left:1px black;
    width:300px;
    float:right;
    }

    try that :)
    Best,
    Jakomo
     
    jakomo, Aug 13, 2007 IP
  5. twistedspikes

    twistedspikes Notable Member

    Messages:
    5,694
    Likes Received:
    293
    Best Answers:
    0
    Trophy Points:
    280
    #5
    oh sorry. Float the 2nd column right.

    then You would need something to clear both sides after those. I'll edit my post above to include it.
     
    twistedspikes, Aug 13, 2007 IP
  6. twistedspikes

    twistedspikes Notable Member

    Messages:
    5,694
    Likes Received:
    293
    Best Answers:
    0
    Trophy Points:
    280
    #6
    It seems I can't edit it, so i'll quote it...enjoy.
     
    twistedspikes, Aug 13, 2007 IP
  7. chrisj

    chrisj Well-Known Member

    Messages:
    606
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #7
    That's close. Even though column 2 is to the right, it is still below column 1. They are not side by side. Any thoughts?

    Thanks again.
     
    chrisj, Aug 14, 2007 IP
  8. BlueEew

    BlueEew Well-Known Member

    Messages:
    2,434
    Likes Received:
    79
    Best Answers:
    1
    Trophy Points:
    150
    #8
    Do you have an image or preview of the problem?
     
    BlueEew, Aug 14, 2007 IP