Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question problem with columns in css

    Hi,

    I got stuck again..I'm trying to create two columns in the center of my layout. The left will contain all my content (posts for my blog) and the right will be links and stuff.

    I'm trying to keep it simple with having a white background color for both and they seem to be working fine, but the columns are messing up my bottom copyright bar.

    I decided to use padding to make the bar look how I want it to. The Navigation is still good but the columns are bothering the bottom one.

    http://s17.myhostcenter.com/~egmipksb/images/layout.htm

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>My Blog</title>
    <style type="text/css">
    body {
    background: #000000 url("http://s17.myhostcenter.com/~egmipksb/images/bg.jpg") repeat;
    margin: 0;
    padding: 0;
    font-family: arial, helvetica, verdana, sans-serif;
    font-size: 11px;
    color: #000;
    }
    
    #container {
    background: #fff;
    border: 0;
    margin: auto;
    padding: 0;
    width: 600px;
    }
    
    h1 {
    background: #fff url("http://s17.myhostcenter.com/~egmipksb/images/banner.jpg") no-repeat;
    margin: 0;
    padding: 0;
    width: 600px;
    height: 165px;
    text-indent: -9999px;
    }
    
    #top {
    background: #000;
    padding-bottom: 8px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 8px;
    width: 600px;
    height: auto;
    font-family: arial, helvetica, verdana, sans-serif;
    font-size: 11px;
    color: #fff;
    text-align:center;
    }
    
    #content {
    background: #fff;
    margin: 0;
    padding: 0;
    width: 450px;
    font-family: arial, helvetica, verdana, sans-serif;
    font-size: 11px;
    color: #000;
    float: left;
    }
    
    #menu {
    background: #fff;
    margin: 0;
    padding: 0;
    width: 150px;
    font-family: arial, helvetica, verdana, sans-serif;
    font-size: 11px;
    color: #000;
    float: left;
    }
    
    #footer {
    background: #000;
    padding-bottom: 8px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 8px;
    width: 600px;
    height: auto;
    font-family: arial, helvetica, verdana, sans-serif;
    font-size: 11px;
    color: #fff;
    text-align:center;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
    	<h1>Banner</h1>
    	<div id="top">Navigation</div>
    	<div id="content">Content</div>
    	<div id="menu">Menu</div>
    	<div id="footer">Copyright © 2005 stolenwords13, all rights reserved.</div>
    </div>
    </body>
    </html>
    I don't know why this is happening. Does anyone have a clue how to fix this?

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Clearing

    I didn't get to look at your page (server problems?), but by the looks of the markup and CSS, you need to clear your footer: adding "clear: both;" to the #footer rule should set you straight.
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •