www.webdeveloper.com
Results 1 to 2 of 2

Thread: layout problems

  1. #1
    Join Date
    Mar 2006
    Location
    Canada
    Posts
    1,197

    layout problems

    Hi the below css is used to create to containers to display information side by side within another contain that is part of the entire page layout. When I put information in the containers for explore it displays correctly but Fire fox shoots the right container under the left container.

    thank you for any help

    Code:
    .container{
    	padding:5px;
    	float:right;
    
    }
    
    .left{
    	width:47%;
    	padding:5px;
    	float:left;
    }
    
    .right{
    	width:47%;
    	padding:5px;
    	float:right;
    
    }
    page layout css
    Code:
    #outer {
     text-align:left;
     width:750px;
     min-height:600px;
     text-align:left;
     margin:auto;
    	
    	
    }
    
    	* html #outer {
    height: 600px;
    	
    }
    
    
    #hdr {
     height:75px;
     border-bottom:5px solid #DDEE7C;
     background:#B5D01B;
     color: #848484;
     width:720px;
      }
    
    #bar {
    	position:relative;
    	margin-top:-40px;
    	height:50px;
    	width:598px;
    	left:149px;
    	background:#DDEE7C;
    	border-top:2px double #EFF7C0;
     	border-left: 2px solid #EFF7C0;
     	border-right: 2px solid #EFF7C0;
    	z-index: 99;
    	 }
    	 
    #logo {
    	width:125px; 
    	padding-top:10px;
    	padding-left:10px;
    }
    
    .logoText{
    	text-decoration:none;
    	padding-bottom:10px;
    	color: #FFFFFF;
    	font-weight:bold;
    	font-family: Georgia, "Times New Roman", Times, serif;
    }
    
    #NavPos {
        position:relative;
    	padding-top:10px;
    	margin-left:155px; 
    	width:500px; 
    	top:-75px;
    
    }
    
    #bodyblock {
    	position: relative;
        color: #848484;
    	width:750px;
    	/*margin-top:-25px;*/
    	padding:0;
    	min-height:600px;
    	left: 3;
    	
    	
    }
    
    	* html #bodyblock{
    height: 600px;
    	
     }
    
    #l-col {
     float:left;
     padding-top:10px;
     border:2px solid #EFF7C0;
     color: #848484;
     width:145px;
     min-height:600px;
     }
     
     	* html #l-col{
    height: 600px;
    	
     }
     
    
    #cont {
    	width:595px;
    	padding-top:10px;
    	float:right;
    	background:#ffffff;
    	color: #333333;
    	border:2px solid #EFF7C0;
    	text-align:left;
    	min-height:600px;
    	
     }
     
     	* html #cont{
    height: 600px;
    	
     }
     
    
    #ftr {
     height:25px;
     color: #848484;
     border-top:3px double #EFF7C0;
     border-left: 2px solid #EFF7C0;
     border-right: 2px solid #EFF7C0;
     border-bottom: 2px solid #EFF7C0;
     margin-top:1em;
     }
    Kevin

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    give .container a specific width

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles