SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot cwebmedia's Avatar
    Join Date
    Nov 2002
    Location
    Calgary, Alberta, Canada
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need Help With Positioning ...

    Hello!

    I'm fairly new to CSS layout techniques and need some help. I've got a set up that one that is 720px wide that then houses 3 cells that are 240px wide. My problem being, as soon as I add the second of the three cells, it locks to the bottom of the first cell.

    I know that it is something probably smokin' easy but I'm at my wits end here ... I need that second (and 3rd) to line up to the top so that they will all be nice in a row.

    I've attached a screeshot as well.

    Thanks in advance
    Attached Images Attached Images

    Keep smiling ...
    It makes people wonder what you're up to ...

  2. #2
    SitePoint Evangelist mafunk's Avatar
    Join Date
    Apr 2003
    Location
    portland
    Posts
    441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't see your screen shot. Can you clarify your question?
    I
    MaFunk

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Just float the blocks nest to each other;
    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .outer {
     width:720px;
     border:1px solid #000;
    }
    .innerfloat {
     width:240px;
     height:100px;
     float:left
    }
    .r {background:red}/* just to show blocks*/
    .b {background:blue}
    .g {background:green}
    </style>
    </head>
    <body>
    <div class="outer"> 
      <div class="innerfloat r">Block 1</div>
      <div class="innerfloat b">Block 2</div>
      <div class="innerfloat g">Block 3</div>
    </div>
    </body>
    </html>
    Hope that helps.

    Paul

  4. #4
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:


    Your avatar looks like Zeldman

  5. #5
    SitePoint Zealot cwebmedia's Avatar
    Join Date
    Nov 2002
    Location
    Calgary, Alberta, Canada
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Your avatar looks like Zeldman
    Heh heh heh ... it's not a 'rip-off' of Zeldman but more of an homage (for lack of a better word) I guess. I bought DWWS and did that for a chuckle with the people at work.

    As for my CSS problem though ... I'm not too sure why the attachment is not visible. It's on the message if I edit it. Do they have to approve attachments first?

    Anyway, the 'float' method worked like a charm! Thanks Paul O'B. Sorry mafunk ... I know that I was not explaining properly at 12:30am so I attached (or attempted to attach) the image for a visual.

    Keep smiling ...
    It makes people wonder what you're up to ...

  6. #6
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do they have to approve attachments first?
    Yes. It's visible now.

  7. #7
    SitePoint Zealot cwebmedia's Avatar
    Join Date
    Nov 2002
    Location
    Calgary, Alberta, Canada
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So I guess one should not base a question on an attachment then! Makes sense that they have to approve them first though. I'll just know better for next time.

    Keep smiling ...
    It makes people wonder what you're up to ...


Bookmarks

Posting Permissions

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