SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    BLYAT! theGWS's Avatar
    Join Date
    Jun 2001
    Location
    Melbourne, AU & Seattle, WA
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I'm stumped. My 3-column layout just won't work.

    I'm trying to make a 3-column layout. The left and right columns must be 160px wide and be touching the left and right edges of the page. The center column must adjust width automatically for the browser window and keep a 20px distance from the left and right columns. How do you set the width of the center column? Is what I'm trying even possible with relative positioning?

    HTML 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>
    
    
    <style type="text/css">
    
        * {margin:0; padding:0;}
        
        body {
            font-family: arial, sans-serif;
            font-size: 12px;
            text-align: left;
            color: #666666;
            background: #ffffff;
            margin: 0;
            padding: 0;
        }
        
        #header_top {
            margin: 0 0 30px 0;
            height: 50px;
            width: 100%;
            text-align: center;
            border: solid 1px #000000;
        }
        
        #menu_left {
            margin: 0;
            padding: 0 0 0 10px;
            width: 160px;
            float: left;
            text-align: left;
            border: solid 1px #ff0000;
        }
        
        #center_body {
            margin: 0 180px 0 20px;
            padding: 0;
            width: ???;
            float: left;
            text-align: left;
            border: solid 1px #00ff00;
        }
        
        #menu_right {
            margin: 0;
            padding: 0 10px 0 0;
            width: 160px;
            float: right;
            text-align: right;
            border: solid 1px #0000ff;
        }
        
        .clear {
            clear: both;
            height: 1px;
            margin: -1px 0 0;
        }
    
    </style>
    
    </head>
    <body>
    
        <div id="header_top">THE HEADER. THE HEADER. THE HEADER. THE HEADER. THE HEADER. </div>
    
        <div class="clear"></div>
        
        <div id="menu_left">THE LEFT MENU. THE LEFT MENU. THE LEFT MENU. THE LEFT MENU. THE LEFT MENU. THE LEFT MENU. THE LEFT MENU. THE LEFT MENU. THE LEFT MENU. THE LEFT MENU. </div>
    
        <div id="center_body">THE CENTER BODY. THE CENTER BODY. THE CENTER BODY. THE CENTER BODY. THE CENTER BODY. THE CENTER BODY. THE CENTER BODY. THE CENTER BODY. THE CENTER BODY. THE CENTER BODY. </div>
    
        <div id="menu_right">THE RIGHT MENU. THE RIGHT MENU. THE RIGHT MENU. THE RIGHT MENU. THE RIGHT MENU. THE RIGHT MENU. THE RIGHT MENU. THE RIGHT MENU. THE RIGHT MENU. THE RIGHT MENU. </div>
    
        <div class="clear"></div>
    
    </body>
    </html>
    ~Dorian

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What relative positioning? You don't seem to be using it and it is not useful for this anyway.

    Why do you need to set a width on the center column?

    Why do you feel the need to clear #header_top?

    There are better clearing techniques that don't require extra markup. I suggest you read up on clearing and containing floats.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    BLYAT! theGWS's Avatar
    Join Date
    Jun 2001
    Location
    Melbourne, AU & Seattle, WA
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, all4nerds. The layout is exactly as I want it, however the left column (the navigation menu) doesn't let me click links. I think it's being blocked out by the .x class div.

    Kravvitz, why is relative positioning not useful for this?
    ~Dorian

  4. #4
    BLYAT! theGWS's Avatar
    Join Date
    Jun 2001
    Location
    Melbourne, AU & Seattle, WA
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works. Thanks you!
    ~Dorian

  5. #5
    BLYAT! theGWS's Avatar
    Join Date
    Jun 2001
    Location
    Melbourne, AU & Seattle, WA
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What does the margin: 0 -172px; do? What formula did you use to come up with that number?
    ~Dorian

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    negative margins drag a container out of it's normal position. Similar to relative positioning - except I think relative position leaves the space of it's original location occupied - whereas negative margins completely change the location or size of an element in the flow.
    The use of negative margins can make for some very interesting effects that can't be accomplished in other ways without resorting to absolute positioning(which has many disadvantages)

    margin: 0 -172px; is shorthand for
    Code:
    margin-top: 0;
    margin-bottom: 0;
    margin-left: -172px;
    margin-right: -172px;
    So it makes the left side of a container extend left a further 172px
    and the right side of the container extend right a further 172px.

  7. #7
    BLYAT! theGWS's Avatar
    Join Date
    Jun 2001
    Location
    Melbourne, AU & Seattle, WA
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but why -172 ??? Of all numbers where did that one come from? I've had to make some subtle changes to the layout and the entire design is completely thrown off. I know this is supposed to be easy, but I cant figure out how these sizes were chosen. Every time I make a change on one thing, then some of the other elements get pushed to the next line.
    ~Dorian

  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    It's because of the size of the columns,
    Code:
    padding:0 0 0 10px;
    width:160px;
    border: solid 1px #ff0000;
    Adding the padding, width, border together gives you the real width of an element. and the magic number 172
    10 + 160 + 2(border left and right)

  9. #9
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    theGWS, you may want to read up on the box models.

    Quote Originally Posted by theGWS View Post
    Kravvitz, why is relative positioning not useful for this?
    Like Mark said, relative positioning causes an element to be rendered at on offset from its original position without moving it, so it leaves a footprint. Setting position:relative by itself is not relative positioning. To be relative positioning you must specify a non-zero, non-auto value for at least one of the top, left, right, and bottom properties as well.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •