1 reply [Last post]
vagabras
vagabras's picture
Offline
newbie
Last seen: 9 years 39 weeks ago
Timezone: GMT-6
Joined: 2006-12-21
Posts: 3
Points: 5

I am trying to center a div container that has several sub divs. I need to maintain the formatting for the divs within the container:

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>
 
<!-- #BeginEditable "doctitle" -->
<title>Untitled 12</title><!-- Master template as of 11/1/12 -->
<!-- #EndEditable -->
 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
 
<!-- Site main css -->
<link href="main_dev12.css" rel="stylesheet" type="text/css" />
 
<!-- <link rel="stylesheet" type="text/css" href="main_dev1.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="main_dev2.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="main_dev3.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="main_dev4.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="master5.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="master6.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="master7.css" /> -->
 
 
 
<!--This script should appear below your LINK stylesheet tags
 
<script src="styleswitch.js" type="text/javascript">
 
/***********************************************
* Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library (<a href="http://www.dynamicdrive.com" rel="nofollow">www.dynamicdrive.com</a>)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at <a href="http://www.dynamicdrive.com/" rel="nofollow">http://www.dynamicdrive.com/</a> for this script and 100s more
***********************************************/
 
</script> -->
 
 
<!-- Scrollbar css -->
<link href="js/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/jquery.mCustomScrollbar.js"></script>
 
<script type="text/javascript">
    (function($){
        $(window).load(function(){
            $("#container_text").mCustomScrollbar();
        });
    })(jQuery);
</script>
 
</head>
 
<!-- #BeginEditable "body tag" -->
<body>
<!-- #EndEditable -->
 
<!-- <table id="main" align="center" cellpadding="0" cellspacing="0">
  <tr>
	<td> -->
<div id="main">
 
<div id="masthead">
<!-- #BeginEditable "nav" -->
<div id="top_nav">
<a class="nav_bar" href="lauren.html">Lauren</a>
<a class="nav_bar" href="quinn.html">Quinn</a>
<a class="nav_bar" href="on_ice.html">On the Ice</a>
<a class="nav_bar" href="journal.html">Journal</a>
<a class="nav_bar" href="gallery.html">Photos</a>
<a class="nav_bar" href="sponsors.html">Sponsors</a>
<a class="nav_bar" href="contact.html">Contact</a>
</div>
<!-- #EndEditable -->
	<!-- End of top_nav -->
</div><!-- End of masthead -->
 
 
<div id="container">
 
<div id="container_photo"></div>
<!-- #BeginEditable "Content" -->
<div id="container_text">
<h2>Page Title</h2>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac augue purus. Mauris aliquet luctus pharetra. 
Sed quis nunc dui, eget luctus nisl. Curabitur elementum scelerisque scelerisque. 
Fusce malesuada, tellus ut condimentum dictum, libero felis eleifend velit, ut faucibus velit urna eget diam. 
Mauris tortor ipsum, mattis nec consectetur ac, adipiscing vitae lacus. 
In ante nisi, condimentum ac tempor sed, scelerisque at velit. 
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
Suspendisse potenti. Aliquam feugiat, ipsum quis commodo tincidunt, dolor justo consectetur ligula, id fermentum erat erat quis lorem.</p>
 
<p>Donec nisl dolor, vehicula sed dictum quis, mattis vel diam. Nulla sit amet est arcu. 
Aliquam eu bibendum mauris. Sed vitae mauris mauris. Fusce vestibulum nunc non felis molestie lacinia. 
Proin venenatis enim in eros luctus ac mattis ligula egestas. Proin malesuada posuere augue eget commodo. 
Donec malesuada molestie quam, id porta tellus posuere ut. Duis ut lorem eget diam facilisis blandit eget sit amet eros.
 
Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
Fusce et eros leo, sagittis egestas tortor. Quisque placerat, risus nec bibendum laoreet, 
erat magna dictum metus, et dictum ligula lorem sed leo. Fusce dapibus dui et nibh cursus vulputate. 
Ut ullamcorper iaculis leo, ac dictum libero porttitor in. Integer pharetra consectetur libero, a bibendum dui mollis id. 
Suspendisse vitae magna lorem, a feugiat ipsum.</p>
 
<p>Cras condimentum dolor commodo metus sodales tristique. Nunc sit amet iaculis ligula. 
Morbi orci augue, tempor et adipiscing sed, pretium vel augue. Nunc at dignissim elit. Sed at tellus sem. 
Cras volutpat lectus vitae augue sollicitudin sagittis. Duis a ante odio, et lacinia sapien. 
Sed neque erat, commodo quis consequat ut, venenatis eu magna. Ut consectetur consequat malesuada. 
Donec ac augue non urna elementum porttitor vitae in sem. Mauris dictum dictum neque et volutpat.</p>
 
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
Curabitur id velit lorem. Vivamus nec risus vel lacus aliquet imperdiet et ut felis. 
Mauris et tellus quis massa pharetra egestas vitae ut felis. Aenean nec dolor et augue sodales sagittis vitae eu magna. 
Vivamus malesuada magna sit amet orci gravida vestibulum. Praesent rutrum pretium leo, ut elementum sapien vehicula ac.</p>
</div>
<!-- #EndEditable -->
	<!-- End of container_text -->
</div><!-- End of container -->
 
<div id="footer">
<p class="copyright">Copyright © 2012 <a class="copyright" href="http://www.wheatdesigns.com">Wheat Designs</a>&nbsp; <br />
All Rights Reserved</p></div>
 
<!--    </td>
  </tr>
</table> -->
</div><!-- End of #main div -->
</body>
</html>

CSS:

/* CSS layout */
body {
	margin: 0;
	padding: 0;
	width: 100%;
	background-color: #e5e8de; 
	/* font-family: Georgia, "Times New Roman", Times, serif; */
	font-family: Arial, Helvetica, sans-serif;
}
 
/* Main Body */
#main {
	width: 85%;
	padding-left: 7%;
	margin-left: auto;
	margin-right: auto;
}
 
/* Header with menu and title graphic */
#header	{
}
 
#masthead {
	height: 260px;
	background-image: url('images/header_lg3.jpg');
	background-repeat: no-repeat;
	background-position: left;
}
 
#top_nav {
	padding-top: 225px;
	padding-left: 267px;
}
 
a.nav_bar:link {
	color: #5c5c5c;
	font-size: 12px;
	font-weight: bold;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-decoration: none;
	letter-spacing: 1px;
	padding: 0px 3px 0px;
}
 
a.nav_bar:visited {
	color: #5c5c5c;
	font-size: 12px;
	font-weight: bold;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-decoration: none;
	letter-spacing: 1px;
	padding: 0px 3px 0px;
}
 
a.nav_bar:hover {
	color: #000;
	font-size: 12px;
	font-weight: bold;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-decoration: underline;
	letter-spacing: 1px;
	padding: 0px 3px 0px;
}
 
a.nav_bar:active {
	color: #a6a6a6;
	font-size: 12px;
	font-weight: bold;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-decoration: none;
	letter-spacing: 1px;
	padding: 0px 3px 0px;
}
/*
body#home_nav a#home_nav,
body#lauren_nav a#lauren_nav,
body#quinn_nav a#quinn_nav,
body#journal_nav a#journal_nav,
body#onice_nav a#onice_nav,
body#come1_nav a#come1_nav,
body#come2_nav a#come2_nav,
body#results_nav a#results_nav,
body#sponsor_nav a#sponsor_nav,
body#guestbook_nav a#guestbook_nav,
body#contact_nav a#contact_nav,
body#progrmas_nav a#progrmas_nav, {
	color: #000;
	border-top-style:solid;
	border-right-style:none;
	border-bottom-style:solid;
	border-left-style:none;
}
 
#navlist ul {
	border: 0;
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}
 
#navlist ul li {
	display: block;
	float: left;
	text-align: center;
	padding: 0;
	margin: 0;
}
 
#navlist ul li a {
	background: #fff;
	width: 78px;
	height: 18px;
	border-top: 1px solid #f5d7b4;
	border-left: 1px solid #f5d7b4;
	border-bottom: 1px solid #f5d7b4;
	border-right: none;
	padding: 0;
	margin: 0 0 10px 0;
	color: #f5d7b4;
	text-decoration: none;
	display: block;
	text-align: center;
	font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}
 
#navlist ul li a:hover {
	color: #930;
	background: #f5d7b4;
}
*/
 
/* Body for text and rotating image */
#container {
	max-width: 1024px;
	max-height: 550px;
}
 
#container_photo {
	width: 380px;
	height: 500px;
	float: right;
	font-size: small;
	background-image: url('images/1.png');
	background-repeat: no-repeat;
	background-position: right;
}
 
#container_text {
	min-width: 350px;
	width: 660px;
	height: 500px;
	font-size: small;
}
 
h2 {
	font-size: 150%;
	letter-spacing: 1px;
	color: #000;
	font-family: Georgia, "Times New Roman", Times, serif;
}
 
h3	{
	font-size: 110%;
	font-weight: bold;
	text-decoration: underline;
	/*text-align: center;*/
}
 
h4{
	font-size: 100%;
	font-weight: bold;
	text-decoration: underline;
}
 
ul	{
 
}
 
.dances	{
	margin: 5px;
}
 
.results	{
	margin: 5px;
}
 
.portfolio {
	float: right;
}
 
a:link {
	color: #5c5c5c;
	font-weight: bold;
	text-decoration: none;
}
 
a:visited {
	color: #5c5c5c;
	font-weight: bold;
	text-decoration: none;
}
 
a:hover {
	color: #000;
	font-weight: bold;
	text-decoration: none;
}
 
a:active {
	color: #a6a6a6;
	font-weight: bold;
	text-decoration: none;
}
 
/* column css for three-column design */
#left_col {
	width: 5%;
	float: left;
}
 
#right_col {
	width: 5%;
	float: right;
}
 
#page_content {
	/* margin-left: 200px;
	margin-right: 200px; */
	height: 450px;
	background-image: url('images/QL_BG600v5web.png');
	background-repeat: no-repeat;
	background-position: right;
	/* background-position: 0px, 0px; */
}
 
/* Footer for copyright and contact information */
#footer {
	clear: both;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	text-align: center;
	padding-top: 25px;
	margin-left: -7%;
	text-decoration: none;
	font-weight: normal;
}
.content {
	font-size: small;
}
.copyright {
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
	text-align: center;
	text-decoration: none;
}
a.copyright:link {
	color: #000;
	font-size: x-small;
	font-weight: normal;
	text-align: center;
	text-decoration: none;
	font-style: italic;
}
a.copyright:visited {
	color: #000;
	font-size: x-small;
	font-weight: normal;
	text-align: center;
	text-decoration: none;
	font-style: italic;
}
a.copyright:hover {
	color: #5c5c5c;
	font-size: x-small;
	font-weight: normal;
	text-align: center;
	text-decoration: none;
	font-style: italic;
}
a.copyright:active {
	color: #000;
	font-size: x-small;
	font-weight: normal;
	text-align: center;
	text-decoration: none;
	font-style: italic;
}
 
/* #scrollbar 1 { width: 520px; clear: both; margin: 20px 0 10px; }
#container_text .viewport { width: 640px; height: 430px; overflow: hidden; position: relative; }
#container_text .overview { list-style: none; position: absolute; left: 0; top: 0; }
#container_text .thumb .end,
#container_text .thumb { background-color: #000; }
#container_text .scrollbar { position: relative; float: right; width: 15px; }
#container_text .track { background-color: #D8EEFD; height: 100%; width:13px; position: relative; padding: 0 1px; }
#container_text .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#container_text .thumb .end { overflow: hidden; height: 5px; width: 13px; }
#container_text .disable{ display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; } */

//mod edit: Don't forget the "/" when closing the code tag. Fixed. ~gt

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Have you looked in the how to

Have you looked in the how to section CSS Centering horizontally