SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    Albany, N.Y.
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    align the right column on the right side

    I need to align the right column on the right side and the left column on the right side.

    I am a newbie. so please keep it as simple as possible


    here is the code below


    <html>
    <head>
    <title>Two Column CSS Layout</title>
    <style type="text/css">




    #main {
    background:white;
    }


    #header {
    background-color:#ddd;
    }

    #nav {
    background-color:#c99;
    }

    #rightcolumn {
    background-color:#9c9;
    }

    #leftcolumn {
    background-color:#ccc;;
    }


    </style>
    </head>
    <body>

    <div id="main">
    <div id="header"><h1>This is the header for your banner</h1></div>
    <div id="nav"><h3>This is the NAV for your links</h1></div>
    <div id="rightcolumn">This is the right column</div>
    <div id="leftcolumn">This is the left column</div>

    </div>


    </body>
    </html>

  2. #2
    SitePoint Wizard Pedro Monteiro's Avatar
    Join Date
    Sep 2002
    Location
    Lisbon
    Posts
    1,393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure if this is what your looking for.

    Code:
     <html>
    <head>
    <title>Two Column CSS Layout</title>
    <style type="text/css">
     
    
    
    #main {
    background:white;
    }
    
    
    #header {
    background-color:#ddd;
    }
    
    #nav {
    background-color:#c99;
    }
    
    #rightcolumn {
    background-color:#9c9;
    background-color:#ccc;
     position: absolute; 
     WIDTH: 300px; 
     HEIGHT: 100px;
     top:125px; 
     left: 300px; 
     right: 0px;
     padding: 0px; 
     z-index: 1; 
     BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; border-spacing: 0px;
    }
    
    #leftcolumn {
    background-color:#ccc;
     position: absolute; 
     WIDTH: 153px; 
     HEIGHT: 100px;
     top:125px; 
     left: 9px; 
     right: 0px;
     padding: 0px; 
     z-index: 1; 
     BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; border-spacing: 0px;
    }
    
    
    </style>
    </head>
    <body>
    
    <div id="main">
    <div id="header"><h1>This is the header for your banner</h1></div>
    <div id="nav"><h3>This is the NAV for your links</h1></div>
    <div id="rightcolumn">This is the right column</div>
    <div id="leftcolumn">This is the left column</div>
    
    </div>
    
    
    </body>
    </html>

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Or you could float the columns depending on the situation.

    Code:
    #rightcolumn {
    background-color:#9c9;
    float:right;
    width:49.9%;
    }
    
    #leftcolumn {
    background-color:#ccc;;
    float:left;
    width:49.9%
    }
    Of course it all happens on what you intend to do next

    Paul


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
  •