Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS using div not tables

    how do you align text in css onlyusing divs and no tables such that the output looks like this:

    INVITED BY: John Steward
    INFO: Some info
    LOCATION: London
    INFORMATION: Some more info


    I want the left part to align to the right and the right part to align to the left.

    Thank you.

  • #2
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    Display <span>'s inline-block which will allow you to specify a width.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title></title>
    <style type="text/css">
        #info span {
            display: inline-block;
            width: 130px;
        }
    </style>
    </head>
    <body>
        
        <div id="info">
            <div><span>INVITED BY:</span> John Steward</div>
            <div><span>INFO:</span> Some info</div>
            <div><span>LOCATION:</span> London</div>
            <div><span>INFORMATION:</span> Some more info</div>
        </div>
    
    </body> 
    </html>

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Why is it hard to do tables in divs?

  • #4
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think its becuase you use css instead of align attributes

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Anyway, that looks more like a tabular data and hence a <table> (with proper <th>) would be the most appropriate element to be used here.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •