...

View Full Version : Resolved Margin Auto HELP!



tortcher
12-14-2009, 07:35 PM
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


<!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


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;}

Excavator
12-14-2009, 08:39 PM
Hello tortcher,
This will center it again -

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 (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/).

tortcher
12-15-2009, 12:39 AM
Changing it to relative resolved the issue, the site now looks great.

Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum