#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    4
    Rep Power
    0

    dumb css question


    hey there
    i am new to css and i am stuck on something i dont understand well.

    i am trying to do this without the use of tables at all!

    in the same <div> i want to be able to align one section of text to the left - and another section of text to the right.

    it would be super easy with tables and simply two <td>'s in a <tr> with appropriate align: left/right options.

    but whenever i add two <p> blocks to the <div> block - they get added one on top of the other - and the text in the <p> blocks dont get aligned left/right.

    here are my styles and snippet of code:
    div.news {
    margin: 0px;
    padding: .6em;
    background-color: #354f7e;
    }
    p.headline {
    display: inline;
    postion: relative;
    left: 5px;
    background-color: #354f7e;
    color: white;
    text-align: left;
    }
    p.date {
    display: inline;
    background-color: #354f7e;
    color: white;
    text-align: right;
    }

    <div class="news">
    <p class="headline">Microsoft go bankrupt</p>
    <p class="date">24 May 2003</p>
    </div>


    this gives me the headline and date positioned correctly vertically, but the two <p>'s are joined together in the center instead of being aligned left and right.
    Last edited by roongpatoong; October 3rd, 2003 at 11:37 PM.
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Try this.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4 Final//EN">
    <html> <head>
    <title></title>
    
    <style type="text/css">
    
      body { paddding: 0px;
             margin: 0px;}
    
      .news { margin: 0px;
              padding: .6em;
              height: 1.2em;
              background-color: #354f7e;}
    
      .headline { width:45%;
                  float:left;
                  color: white;}
    
      .date { width: 45%;
              float: right;
              color: white;
              text-align: right;}
    
    </style>
    </head>
    <body>
      <div class="news">
        <div class="headline">Microsoft go bankrupt</div>
        <div class="date">24 May 2003</div>
      </div> 
    
    </body>
    </html>
    May be viewed at http://garyblue.port5.com/webdev/dumbcss.html

    cheers,

    gary
    Last edited by kk5st; October 4th, 2003 at 02:19 AM.
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo