SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Oct 2005
    Location
    Home
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 column page problem

    I read some tutorials about how to set up a 3 column page in css, but I am having some issues with how the <div>'s are lining up. On the right bar, there is a space between the nav bar and column, and on the left there is a space between the column and footer.

    Here is my style:
    Code CSS:
    html, body {
    	margin: 0;
    	padding: 0;
    	font-family: Arial;
    	font-size: 13px;
    }
     
    #header {
    	background-image: url('images/logo_bg.jpg');
    	height: 195px;
    	width: auto;
    }
     
    #navbar {
    	background-image: url('images/nav_bg.jpg');
    	height: 43px;
    	width: auto;
    	padding: 0px 10px 0px 10px;
    	line-height: 43px;
    }
     
    #leftcolumn {
    	background: #666666;
    	width: 150px;
    	float: left;
    	height: 100px;
    }
     
    #content {
    	background: #FFFFFF;
    	width: auto;
    	float: left;
    	height: 100px;
    }
     
    #rightcolumn {
    	background: #666666;
    	width: 150px;
    	float: right;
    	height: 100px;
    }
     
    #footer {
    	background: #CCCCCC;
    	width: auto;
    	height: 125px;
    	clear: both;
    }

  2. #2
    SitePoint Addict
    Join Date
    Oct 2005
    Location
    Home
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe I figured out the problem. I read an article that says I should call the left bar, right bar, then middle, because CSS is order dependent. Seemed to work for now, but is this the long-term fix?


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
  •