SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: 2 Column layout

  1. #1
    SitePoint Enthusiast Tunny3's Avatar
    Join Date
    Sep 2004
    Location
    Clapham Junction
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry 2 Column layout

    Hi, I've got a 2 column layout with a footer at http:\\www.martockpostoffice.co.uk\test\home.html

    It looks fine in IE6, but doesn't in Firefox (I haven't tried it in any other browsers yet). The bottom of the first column should be white, not gray. It's obviously inheriting it from the body tag, but I don't know why. Any help would be appreciated.

    Here is the CSS:

    Code:
    <!--
    body {
     margin: 0;
     font-family: Georgia, Papyrus, Arial;
     background: #737373;
     color: #00003D;
    }
    
    #container {
    	width: 700px;
    	margin-left: 50px;
    	padding: 0px;	
    	border: 1px solid #000000;
    	background: #FFFFFF;
    }
    
    #shop {
     margin-left: 50px;
    }
    
    #top { 
     font-family: Arial;
     height: 30px; 
     background: #B30000;
     background: #000082;
     background: #434370;
    } 
    
    #header {
     background-image: URL("Lighthouse5.jpg");
     height: 150px; 
    }
    
    #content {
    	margin-top: 10px;
    	float: left;
    	padding: 20px;
    	width: 460px;
    	background: #FFFFFF;
    }
    
    #content h1 {
     font-weight: bold;
     border-bottom: 1px solid #000000;
    }
    
    #subcontent {
     float: right;
     padding-top: 20px;
     width: 200px;
     background: #FFFFFF;
    }
    
    #lozenge {
     background-image: URL("Photo5small.jpg");
     width: 50px;
     height: 38px;
    }
    
    #poster {
     margin: 30px 10px 10px 10px;
     padding: 10px;
    }
    
    #mail {
     font-size: 80%;
     height: 100px;
     margin: 10px 30px 10px 30px;
     padding: 10px;
     border: 1px solid #000000;
    }
    
    #footer {
    	background: #000000;
    	width: 700px;
    	height: 15px;
    	margin-left: 50px;
    	border: 1px solid #000000;
    	border-top: 0;
    	font-size: 60%;
    	color: white;
    	clear: both;
    }
    
    a {
     text-decoration: none;
    }
    
    .lowercase {
     font-size: 80%;
     color: #F4F189;
     font-weight: bold;
    }
    .lowercase:hover {
     color: #1F1F1F;
    }
    .uppercase {
     font-size: 8pt;
     color: #A7B5C2;
     font-weight: bold;
    }
    .uppercase:hover {
     color: #FFFFFF;
    }
    .thirdcase {
     font-size: 100%;
     color: #96DB00;
     font-weight: bold;
    }
    .thirdcase:hover {
     color: #1F1F1F;
    }
    
    
    /* CoolMenus 4 - default styles - do not edit */
    .clCMAbs{position:absolute; visibility:hidden; left:0; top:0}
    /* CoolMenus 4 - default styles - end */
      
    /*Style for the background-bar*/
    .clBar{position:absolute; width:10px; height:0; background-color:#FFFFFF; visibility:hidden}
    
    /*Styles for level 0*/
    .clLevel0,.clLevel0over{position:absolute; padding:2px; font-family:arial,helvetica; font-size:12px; font-weight:bold}
    .clLevel0{background-color:#008C00; color:#FFFFFF;}
    .clLevel0over{background-color:#008C00; color:#FFFFDD; cursor:pointer; }
    .clLevel0border{position:absolute; visibility:hidden; background-color:#008C00; }
    
    /*Styles for level 1*/
    .clLevel1,.clLevel1over{position:absolute; padding:2px; font-family:arial,helvetica; font-size:11px; font-weight:bold}
    .clLevel1{background-color:#008C00; color:#FFCC00;}
    .clLevel1over{background-color:#FFCC00; color:#008C00; cursor:pointer; }
    .clLevel1border{position:absolute; visibility:hidden; background-color:#008C00; }
    
    /*Styles for level 2*/
    .clLevel2,.clLevel2over{position:absolute; padding:2px; font-family:arial,helvetica; font-size:10px; font-weight:bold}
    .clLevel2{background-color:#FFCC00; color:#008C00;}
    .clLevel2over{background-color:#008C00; color:#FFCC00; cursor:pointer; }
    .clLevel2border{position:absolute; visibility:hidden; background-color:#DADCBA; }
    
    
    -->
    Thanks

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

    You need to clear the floated content in order for the container to expand around it.

    Add this code in the exact place specified.
    Code:
    .clearer {
     height:1px;
     overflow:hidden;
     clear:both;
     margin-top:-1px;
    }
    Code:
      <div id="subcontent"> 
    	<div id="shop"> <img src="http://www.martockpostoffice.co.uk/test/PO5.jpg" alt="This is the shop!"/> 
    	</div>
      </div>
    <div class="clearer"></div>
    </div>
    <div id="footer"> Copyright  2004 Martock Post Office. All Rights Reserved. Site 
      designed and maintained by <a href="mailto:ttunnicliff@talk21.com">Tim Tunnicliff</a> 
    </div>

    That should make the background enclose the content.

    Paul

  3. #3
    SitePoint Enthusiast Tunny3's Avatar
    Join Date
    Sep 2004
    Location
    Clapham Junction
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Awesome fella, thanks!


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
  •