SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    .NET inside archigamer's Avatar
    Join Date
    Jan 2002
    Location
    Strongsville OH
    Posts
    1,534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    making a div go down right side of page

    How can you make a div place nicely on the right side of the screen without creating a horizontal scroll bar?

    I have tried a few things like margin-left: 100%; which just creates a scrollbar. Also I have done things like margin-left:94.1%; it works good in some browsers but in others it doesnt.
    Web Finesse Studios
    Professional, business oriented web hosting and development.

  2. #2
    SitePoint Enthusiast Mikeymoo's Avatar
    Join Date
    Jul 2003
    Location
    St. Albans, Uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The basic model is:-

    body = 100%

    Content = 90%
    right = 10% (or even 9.99%) and float the right div to the right.

    Check out the following thread for my help:
    http://www.sitepoint.com/forums/showthread.php?t=143801

    or have a look at my layout code (which is just a modified version of the above so I can see it clearer)

    http://www.webdsign.co.uk/test2.htm
    http://www.webdsign.co.uk/test2.css

    Hope that helps in some way.
    Mikel
    Good decisions come from experience.
    Experience comes from making bad decisions.

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

    To place an element on the right hand side of the page just put it there
    Code:
    position:absolute;
    right:0;
    width:200px
    Or float it there:
    Code:
    float:right:
    width:200px;
    It all depends on what you are trying to achieve. If you want 100% height then look at the links Mikel posted above and look at my 3 col thread which explains 100% height in detail.

    Here's just a basic example of putting something on the right without a scrollbar appearing.

    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">
    body {margin:0;padding:0}
    #right{
     width:200px;
     background:#ffffcc;
     border:1px solid #fff;
     position:absolute;
     right:0;
     top:220px
    }
    #right2 {
     width:200px;
     float:right;
     height:200px;
     background:red;
    }
    </style>
    </head>
    <body>
    <div id="right2"> 
      <p>This is some right content : This is some right content</p>
    </div>
    <div id="right"> 
      <p>This is some right content : This is some right content</p>
    </div>
    </body>
    </html>
    Paul

  4. #4
    .NET inside archigamer's Avatar
    Join Date
    Jan 2002
    Location
    Strongsville OH
    Posts
    1,534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks guys. Ill look into these
    Web Finesse Studios
    Professional, business oriented web hosting and development.

  5. #5
    SitePoint Member natimage's Avatar
    Join Date
    Apr 2003
    Location
    Colorado
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just know that if you float it there...it will then grow or shrink with the browser window. If the rest of your page allows this, it's fine.

    Another good source for css is www.csszengarden.com. Click on their "resources" for lots of info.

  6. #6
    .NET inside archigamer's Avatar
    Join Date
    Jan 2002
    Location
    Strongsville OH
    Posts
    1,534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it will then grow or shrink with the browser window
    I think I should be ok on that since all my divs are measured in percentages not a defined number of pixils. Thanks for the heads up though.
    Web Finesse Studios
    Professional, business oriented web hosting and development.


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
  •