SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hey...question for the CSS experts.

    Wondering what I need to do to design a layout that will span the entire width of the screen? I've always been a designer that likes the 750 pixel width design, but would like to get a handle on the design spaning the entire width of the screen...I think I have a pretty good idea how it is done, but everytime I try the design, I get a horizontal scroll bar?? It only scrolls a few pixels to the right, so its not a whole lot so horizontal scrolling, but its just a enough to know its there and I hate to have a horizontal scroll bar.

    Help is greatly apreciated.

    by the way....I would like to know how to do this in CSS.

    Thanks,
    Deron

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

    If you look at my 3 col layouts you will see that they are mostly 100% wide.

    All you have to do is allow the elements to expand to 100% or explicitly set them to 100% if absolute positioning is applied.

    You have to ensure that an element is never larger than 100% or scrollbars will appear. This can be caused by padding borders or margins etc making the element bigger than 100%.

    Usually on fluid layouts one part of the layout will be fluid and another part is usually fixed (like the navigation). In this way the page can resize up and down and be seen at different resolutions etc.

    The page needs to flow and so absolutely placed elements should be chosen catefully so that they don't interfere with the fluid page. Most elements will therfore be statically placed and in the flow of the document.

    The best way to learn is to play around with it until you understand what's happening. Heres some examples that show the 100% width and if you display only one div at a time you will see what effect it has .

    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">
    #outer1 {
     background:red;
     border:1px solid #000;
    }
    #outer2 {
     width:100%;
     background:blue;
     border:1px solid #000;
    }
    #outer3 {
     background:green;
     border:1px solid #000;
    }
    #outer4 {
     position:absolute;
     background:yellow;
     border:1px solid #000;
    }
    #outer5 {
     position:absolute;
     background:pink;
     width:100%;
     border:1px solid #000;
    }
    #outer6 {
     position:relative;
     background:pink;
     padding:0 25px;
     border:1px solid #000;
    }
    #outer7 {
     position:relative;
     background:pink;
     padding:0 25px;
     border:1px solid #000;
     width:100%;
    }
    </style>
    </head>
    <body>
    <div id="outer1">I am 100% wide with no scrollbar</div>
    <div id="outer2">I am 100% wide but a scrollbar has appeared because I am 100% 
      plus 2pixels of borders</div>
    <div id="outer3">I am 100% wide with no scrollbar because I have expanded to fill 
      the width and I have borders</div>
    <div id="outer4">I am only content width because I am absolute</div>
    <div id="outer5">I am now 100% wide but have scollbars because of the borders</div>
    <div id="outer6">I am now 100% wide and have no scollbars and I have borders and 
      padding</div>
    <div id="outer7">I am now 100% wide but have big scollbars because I have borders 
      and padding</div>
    </body>
    </html>
    Hope that helps

    Paul

  3. #3
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great. I'll play around with it and see what I get. I'm sure if I have a problem, you know who I'll be turning to! lol.

    Thanks,
    Deron


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
  •