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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Angry Margin Auto HELP!

    I just got finished working on this project. You can view it live at gcrefs.org but I'm having problem centering the main container div.

    The main container div is 900px wide
    I had it centered before by doing
    //
    left: 50%;
    margin-left: -450px;
    //
    however, if you shrink the window you lose the content... you literally cannot scroll to it. I have applied margin auto to the container class, but the elements nested are not responding. The container itself is responding, but the divs inside are not. I am getting very frustrated, any help would be greatly appreciated.

    Also, this is my first website, so some criticism and tips would also be great.

    Thanks!
    Tortcher

    Html
    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>Gold Country Wrestling Officials Association - Twin Cities, MN</title>
    
    <link rel="stylesheet" type="text/css" href="styles/style.css" />
    
    </head>
    
    
    
    
    <body>
    
    <div class="container"> 
    
    <div class="fixedbgwhite">
    </div>
    
    <!-- Header -->
    <div class="header">
    <span>
    <a href="index.php"><img src="images/header.jpg" alt="Gold Country Banner" border="none" /></a>
    </span>
    </div>
    
    <!-- Important News and updates -->
    <div class="importantnewsimage">
    <span>
    <img src="images/news-header.jpg" alt="News and Updates" />
    </span>
    </div>
    
    
    <div class="importantnews">
    
    <!-- Important News and updates content -->
    <div class="importantnewscontent">
    
    <p class="contentmargin">
    <br />
    
    <!--  START OF EDITABLE AREA -->
    
    <!--  START OF EDITABLE AREA -->
    <!--  START OF EDITABLE AREA -->
    <!--  START OF EDITABLE AREA -->
    <!--  START OF EDITABLE AREA -->
    
    No news updates at this time. 
    <!--  END OF EDITABLE AREA -->
    <!--  END OF EDITABLE AREA -->
    <!--  END OF EDITABLE AREA -->
    <!--  END OF EDITABLE AREA -->
    <!--  END OF EDITABLE AREA -->
    <!--  END OF EDITABLE AREA -->
    <!--  END OF EDITABLE AREA --> Check back soon!
    </p>
    
    <br />
    
    </div>
    
    <div class="expandableindex">
    <!-- Main content Heading -->
    
    <div>
    <p class="style2">Welcome to Gold Country</p>
    
    </div>
    
    <!-- Main content -->
    <div class="maincontentwidth">
    <p class="maincontenttext">
    
    
    
    <!--  START OF EDITABLE AREA -->
    <!--  START OF EDITABLE AREA -->
    <!--  START OF EDITABLE AREA -->
    <!--  START OF EDITABLE AREA -->
    <!--  START OF EDITABLE AREA -->
    <!--  START OF EDITABLE AREA -->
    
    
    Gold Country Wrestling Officials Association was started in 1980.<br /><br />                 
    
    Gold Country is an organization dedicated entirely to the sport of wrestling.&nbsp; We have over 60 members with many years of experience at both the high school and college level.
     <br /><br />              
    
    Gold Country is organized to best serve all the needs of a school or conference.&nbsp; Our Assignment Secretary will assist in scheduling matches and guaranteeing officials with the proper level of experience.
    
    
    
    <!--  END OF EDITABLE AREA -->
    <!--  END OF EDITABLE AREA -->
    <!--  END OF EDITABLE AREA -->
    <!--  END OF EDITABLE AREA -->
    <!--  END OF EDITABLE AREA -->
    <!--  END OF EDITABLE AREA -->
    <!--  END OF EDITABLE AREA -->
    <!--  END OF EDITABLE AREA -->
    <!--  END OF EDITABLE AREA -->
    <!--  END OF EDITABLE AREA -->
    
    <a href="about.php">Learn more about Gold Country </a><br />
    <br /><br />
    </p>
    </div>
    </div>
    
    <div class="container2">
    
    <!-- Footer --> 
    
    <span class="style3">
    
    
    <a href="index.php">Main Page</a> |
    
    <a href="newsletter.php">Latest Newsletter</a> |
    
    <a href="documents.php">Download Documents </a> |
    
    <a href="schools.html" target="_blank">School Contact Info</a> |
    
    
    <a href="http://wcco.com/schoolclosings" target="_blank">School Closings</a> |
    
    <a href="training.php">Training Links</a> |
    	
    <a href="schedules.html" target="_blank">View Schedules</a> |
    
    <a href="unavailability.php">UNavailability Calendar</a><br />
    <br />
    
    <a href="needrefs.html" target="_blank">Matches Needing Officials</a> |
    
    <a href="roster.php">Meet the Refs</a> |
    
    
    <a href="links.php">Wrestling Links</a> |
    
    <a href="galleries.php">Photo Galleries</a> |
    
    <a href="about.php">About Gold Country</a> |
    
    <a href="asktheref/index.php">Ask the Ref</a> |
    
    <a href="contact.php">Contact Us</a>
    
    </span>
    
    
    <br /><br />
    
    
    <p align="center" class="style7">&copy; Gold Country Officials Association &ndash; Site Developed by <a href="http://www.lukestudios.com">www.LukeStudios.com</a></p>
    
    
    
    
    </div>
    </div>
    
    
    <!-- Need Refs -->
    <div class="needrefs">
    <span>
    <a href="needrefs.html" target="_blank"><img src="images/need-officials.jpg" alt="Need Officials" border="none" /></a>
    </span>
    </div>
    
    <!-- Email Ron -->
    <div class="emailron">
    <span>
    <a href="mailto:ron.ackerman@comcast.net"><img src="images/need-officials-emailron.jpg" alt="Email Ron" border="none" /></a>
    </span>
    </div><!-- Links for Gold Country -->
    <div class="goldcountryimage">
    <span>
    
    <img src="images/nav-top-links4gc.jpg" alt="Gold Country Refs" />
    </span>
    </div>
    
    
    <div class="startblacknav">
    
    <!-- Black Nav Links -->
    <div class="style1">
    <div class="blacknavigation">
    <p class="textindent">
    <br />
    <a href="newsletter.php">Latest Newsletter</a><br /><br />
       
                   
    <a href="documents.php">Download Documents </a><br />
    
    <br />
    
    <a href="schools.html" target="_blank">School Contact Info</a><br />
    <br />    
             
    <a href="http://wcco.com/schoolclosings" target="_blank">School Closings</a><br /><br />                  
       
    
    <a href="training.php">Training Links</a><br />
    <br />
         
    
    <a href="schedules.html" target="_blank">View Schedules</a><br />
    <br /> 
             
    <a href="unavailability.php">Update your UNavailability</a><br /><br />
    
    <a href="needrefs.html" target="_blank">Matches Needing Officials</a><br /><br /></p>
    
    </div>
    </div>
    </div>
    
    
    <!-- Meet the Refs -->
    <div class="meettherefs">
    <span>
    <a href="roster.php"><img src="images/nav-meetrefs.jpg" alt="Meet The Refs" border="none" /></a>
    </span>
    </div>
    
    <div class="startgraynav">
    
    <!-- Gray Nav Links -->
    <div class="style8">
    <div class="graynavigation">
    
    <p class="textindent">
    
    <br />
    
    <a href="links.php">Wrestling Links</a><br /><br />          
    
    <a href="galleries.php">Photo Galleries</a><br /><br />              
    
    <a href="about.php">About Gold Country</a><br /><br />               
    
    <a href="index.php">Main Page</a><br /><br />          
    
    <a href="contact.php">Contact Us</a><br /><br /> 
    
    </p>         
    </div>
    </div>
    </div>
    <!-- Ask The Ref -->
    <div class="asktheref">
    <span>
    <a href="asktheref/index.php"><img src="images/nav-asktheref.jpg" alt="Ask The Ref" border="none" /></a>
    </span>
    </div>
    
    </div>
    
    </body>
    
    </html>
    And the CSS behind it
    Code:
    body {font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #000000;
    	margin: 0px;}
    
    
    body {background-color: #B3B3B3;
    	padding:0;
    	height:100%;}
    
    .asktheref {position: absolute; 
    	left: 0px; 
    	top: 700px;}
    
    .blacknavigation {width: 200px; 
    	background-color: black; 
    	margin-right: 0px; 
    	margin-left: 0px; 
    	margin-top: 0px}
    
    div.container {width: 900px;
    	height: 100%;
    	margin-left: auto;
    	margin-right: auto;
    	align: center;}
    
    div.container2 {width: 900px;
    	margin-top: 20px;
    	position: relative;
    	text-align: center;
       	left: -240px;}
    
    .containrefs {min-height: 280px;}
    
    .contentmargin {margin-left: 25px; 
    	margin-right: 25px;}
    
    .emailron {position: absolute; 
    	left: 699px; 
    	top: 346px; 
    	z-index: 5;}
    
    .expandable {background-color: blue; 
    	position: relative; 
    	left: -240px; 
    	top: 0px; 
    	width: 900px;
    	min-height: 509px;}
    
    .expandableindex {background-color: white; 
    	position: relative; 
    	left: -240px; 
    	top: 0px; 
    	width: 900px;
    	min-height: 590px;}
    
    .expandablepage {background-color: white; 
    	position: relative; 
    	left: -240px; 
    	top: 0px; 
    	width: 900px;
    	min-height: 680px;}
    
    .fixedbgwhite {background-color: white; 
    	position: absolute; 
    	left: 0px; 
    	top: 0px; 
    	width: 900px; 
    	height: 848px;}
    
    .goldcountryimage {position: absolute; 
    	left: 0px; 
    	top: 150px; 
    	z-index: 1;}
    
    .graynavigation {position: relative;
    	width: 192px; 
    	background-color: #CCCCCC; 
    	margin-right: 0px; 
    	margin-left: 0px; 
    	margin-top: 42px}
    
    .header {position: absolute; 
    	left: 0px; 
    	top: 0px;}
    
    .imgfloatleft {float: left;
    	padding-top: 10px;
    	padding-right: 10px;
    	padding-bottom: 10px;
    	clear: both;}
    
    
    .importantnews {position: absolute; 
    	left: 240px; 
    	top: 181px;
    	width: 500px;}
    
    .importantnewspage {position: absolute; 
    	left: 240px; 
    	top: 160px;
    	width: 500px;}
    
    .importantnewscontent {width: 459px; 
    	background-color: #D1D1D1; 
    	margin-right: 0px; 
    	margin-left: 0px; 
    	margin-top: 0px;}
    
    .importantnewsimage {position: absolute; 
    	left: 238px; 
    	top: 150px; 
    	z-index: 1;}
    
    .maincontentwidth {width: 670px;}
    
    .maincontentwidthpage {width: 840px;}
    
    .maincontenttext {margin-left: 290px; 
    	margin-top: 0px; 
    	margin-bottom: 0px;}
    
    .maincontenttextindent {margin-left: 340px; 
    	margin-top: 0px; 
    	margin-bottom: 0px;}
    
    .meettherefs {position: absolute; 
    	left: 0px; 
    	top: 462px;
    	z-index:2;}
    
    .needrefs {position: absolute; 
    	left: 699px; 
    	top: 150px; 
    	z-index: 1;}
    
    .pagecontenttext {
    font-size: 14px;
    
    	font-weight: bold;
    
    	text-indent: 260px;}
    
    .startblacknav {position: absolute; 
    	left: 0px; 
    	top: 181px;}
    
    .startgraynav {position: absolute; 
    	left: 0px; 
    	top: 486px;}
    
    
    
    .style1 {
    color: #FFFFFF;
    	
    	font-size: 12px;
    	margin-left: 10px;
    }
    .style1 A:link {text-decoration: none;
    		color:white;}
    .style1 A:visited {color:white; text-decoration:none;}
    .style1 A:active {text-decoration:none;
    		color:white;}
    .style1 A:hover {text-decoration: underline;}
    
    
    
    .style2 {
    font-size: 14px;
    
    	font-weight: bold;
    
    	margin-left: 240px;}
    
    
    
    .style3 {color: #000000;
    	margin-top: 0px;
    	margin-bottom: 0px;
    	font-size:10px;
    	font-weight: bold;}
    
    .style3 A:link {text-decoration: none;
    		color:black;}
    .style3 A:visited {color:black; text-decoration:none;}
    .style3 A:active {text-decoration:none;
    		color:white;}
    .style3 A:hover {text-decoration: underline;}
    
    .style7 {font-size: 10px;
    	margin-top: 0px;}
    
    .style7 A:link {text-decoration: none;
    		color:black;}
    .style7 A:visited {color:black; text-decoration:none;}
    .style7 A:active {text-decoration:none;
    		color:white;}
    .style7 A:hover {text-decoration: underline;}
    
    
    .style8 {font-size: 12px; 
    	font-weight: bold;
    	background-color: #CCCCCC;
    	margin-left: 11px}
    
    
    .style8 A:link {text-decoration: none;
    		color:black;}
    .style8 A:visited {color:black; text-decoration:none;}
    .style8 A:active {text-decoration:none;
    		color:white;}
    .style8 A:hover {text-decoration: underline;}
    
    .style9 {
    font-size: 14px;
    
    	font-weight: bold;
    
    	margin-left: 260px;}
    .stylegray {color: gray;
    	margin-top: 0px;
    	margin-bottom: 0px;
    	font-size:10px;
    	font-weight: bold;}
    
    p.textindent {margin-left: 30px;}
    Last edited by tortcher; 12-15-2009 at 08:28 AM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello tortcher,
    This will center it again -
    Code:
    div.container {
    position: relative;
    width: 900px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    }
    Is .fixedbgwhite really only there to give you a white background? Something very wrong with your layout if that's so. Your absolute and relative positioned elements are what's causing the problem. Have a look at the pitfalls of absolute positioning.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    tortcher (12-15-2009)

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Changing it to relative resolved the issue, the site now looks great.

    Thanks!


  •  

    Posting Permissions

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