...

View Full Version : Centered content moving to r side when browser window too large/small



wjwoodson
11-02-2010, 06:19 PM
Hi,

I can't for the life of me figure out what I'm doing wrong here. I'm attempting to center the content of my page in a fixed width container div, by setting l and r margins to auto. This is working fine, except when the browser window is expanded to around 1.5x the width of the container, or less than its width.. When I do this, the container aligns itself along the right side of the page.

I've played around with my css, and It seems to fix the issue by removing the overflow attribute from my container, but that causes another set of issues with my footer leaping up to the top of the page and my sidebar no longer fitting beside my main content inside the container. I've tried playing with widths as well, but that doesn't seem to fix anything.

Can anyone tell me what I'm doing wrong?


My stylesheet:


/*~~~Global Styles~~~*/
html {
background: #fff;
margin: 0 auto;
padding: 0; }

body {
font-family: "Segoe UI", Tahoma, Helvetica, Arial, Sans-Serif;
margin: 0 auto;
padding: 0;
line-height: 1.3em;
background: transparent;
border: 0;
outline: 0;
font-size: 1em;
vertical-align: baseline;
color: #222; }

h1 {font-size: 1.6em; font-weight: normal; }
h2 {font-size: 2.5em; font-weight: normal; }
h3 {font-size: 1.1em; font-weight: normal; }
a {color: #577fae; }
a:hover {color: #92a5bc; }

/*~~~Ribbon Area~~~*/
.ribbon {
margin: 0;
padding: 0;
background: #d6f5c7;
height: 30px;
width: 100%;}
.ribbon_content {
margin: 0 auto;
padding: 0;
background: transparent;
width: 940px;
vertical-align: center;}
.ribbon_content img {
float: left;
border: 0;
padding: 3px 0;}
.ribbon_content ul {
list-style: none;
padding: 0;
margin: 0;}
.ribbon_content li {
float: right;
display: block;
line-height: 30px;}
.ribbon_content li:hover {
background: #fff;}
.ribbon_content li a {
color: #000;
text-shadow: 1px 1px 1px #555;
padding: 0 5px;
line-height: 30px;
text-decoration: none;
text-align: center; }


.container {
width: 940px;
margin: 0 auto;
/*something to do with this is throwing everything off*/ overflow: auto;
padding: 0 0 5px 0;
font-size: 0.9em;}
/*~~~Front Page Divs~~~*/
.main_front {
float: left;
width: 690px;
padding: 0;
margin: 10px;}
.header_front {
-moz-border-radius: 5px;
border-radius: 5px;
background: #808080;
float: left;
width: 670px;
height: 75px;
padding: 0 10px;
margin: 5px 0 10px 0;}
.header_front img {
position: relative;
top: -14px;
padding: 0;}
.feature_front {
-moz-border-radius: 5px;
border-radius: 5px;
background: #eee;
float: left;
width: 670px;
height: 300px;
padding: 0 10px;
margin: 0;}
.subleft_front {
-moz-border-radius: 5px;
border-radius: 5px;
background: #eee;
float: right;
width: 330px;
height: 300px;
padding: 0 5px;
margin: 10px 0 0 0;}
.subright_front {
-moz-border-radius: 5px;
border-radius: 5px;
background: #eee;
float: left;
width: 330px;
height: 300px;
padding: 0 5px;
margin: 10px 0 0 0;}
.sidebar_front {
background: transparent;
float: left;
width: 210px;
min-height: 650px;
margin: 10px 0 0 0;
padding: 0;}
.sidebar_front .section {
-moz-border-radius: 5px;
border-radius: 5px;
width: 200px;
background: #eee;
text-align: right;
margin: 5px 0px 0 0px;
padding: 5px;}

/*~~~Footer Area~~~*/
.footer {
margin: 0 ;
padding: 0;
background: #808080;
height: 30px;
width: 100%;}
.footer_content {
margin: 0 auto;
padding: 0;
background: transparent;
width: 940px;
vertical-align: center;}
.footer_content ul {
list-style: none;
padding: 0;
margin: 0;}
.footer_content li {
color: #fff;
float: right;
display: block;
line-height: 30px;}
.footer_content li:first-child {
float: left;}
.footer_content li a {
color: #fff;
padding: 0 5px;
text-decoration: none;
text-align: center; }

my html:

<body>
<div class="ribbon">
<div class="ribbon_content">
<a href="@Href("~/")"><img src="@Href("hdheader_h25px.png")" alt="Header"></a>
<ul>
<li><a href="@Href("~/gallery");">Gallery</a></li>
<li><a href="@Href("~/about")">About Us</a></li>
<li><a href="@Href("~/news")">News</a></li>
<li><a href="@Href("~/store/all")">Store</a></li>
<li><a href="@Href("~/")">Home</a></li>
</ul>
</div></div>
<div class="container">
<div class="main_front">
<div class="header_front"><img src="@Href("layout/homehd_w690px.png")" alt="header_front"/></div>
<div class="feature_front">Feature</div>
<div class="subleft_front"></div>
<div class="subright_front"></div>

<div class="sidebar_front">
<div class="section" style="height: 355px;">Section1</div>
<div class="section">Section2</div>
</div>

<div class="footer">
<div class="footer_content">
<ul><li> @LinkShare.GetHtml("Website - "+ PageData["Title"])</li>
<li>&copy @DateTime.Now.Year website.com</li></ul>
</div></div>
</body>

teedoff
11-02-2010, 06:37 PM
Can you post the link to your page?

wjwoodson
11-02-2010, 06:40 PM
Resolved this by removing the overflow:auto from my container, and playing with div widths until everything worked again.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum