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
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Centered content moving to r side when browser window too large/small

    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:
    Code:
    /*~~~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:
    Code:
    <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>

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Can you post the link to your page?

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Resolved this by removing the overflow:auto from my container, and playing with div widths until everything worked again.
    Last edited by wjwoodson; 11-03-2010 at 04:13 AM.


  •  

    Posting Permissions

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