Content areas resizing

Hi!

I've used custom images for the background, header, secondary, wrapper, content and footer areas. I've set their CSS properties to "scroll". However, when I expand the viewing area, some of the content areas expand with the screen while other areas stay fixed, thus causing the areas to become misaligned.

Make sense? Any tips? All are appreciated!

Thank you!

  • wellnessbridge

    Hi Aaron!

    Thanks so much for replying. I'm using firebug and the link to the homepage is http://wellnessbridge.org.

    However, I have a landing page up while under the construction. The client wishes to still receive emails through the landing page. Here is a copy of my CSS code from the child theme:


    /* begin child theme css style here */
    /*
    rename this to child-style.css
    any custom css can be input here to prevent any css edit missing when version updates to themes
    to effective overide some css used #custom first id hack

    sample:
    #custom .myclass {} or used !important for better css hack overide

    sample
    #custom .myclass {
    color: #fff !important;
    size: 14px !important;
    }

    try not to touch the css from other stylesheet for better and easy updates.
    */
    body{
    background:url("http://wellnessbridge.org/images/bg-body.gif") repeat fixed center top transparent;
    float:left;
    margin:0;
    padding:0;
    width:100%;
    }
    #header {
    background:url("http://wellnessbridge.org/images/bg-secondary2.png") no-repeat scroll center top transparent;
    float:left;
    margin:0;
    padding:0;
    width:100%;
    }
    #top-bg {
    background:url("http://wellnessbridge.org/images/bg-header.png") no-repeat scroll center top transparent;
    float:left;
    margin:35px 0 0 -25px;
    padding:25px;
    width:100%;
    }
    #top-content {
    background:url("http://wellnessbridge.org/images/bg-secondary.png") no-repeat scroll center top transparent;
    float:left;
    margin:0;
    padding:0;
    width:100.1%;
    }
    #header-gfx-inner {
    margin: 0px;
    padding: 0px;
    width: 960px;
    background: url("../images/mainbg.jpg") no-repeat top;
    float: left;
    }
    #intro-content {
    background:url("http://wellnessbridge.org/images/bg-secondary.png") no-repeat scroll center bottom transparent;
    float:left;
    margin:0;
    padding:0;
    width:100.1%;
    }
    #div.submit-button a {
    -moz-border-radius:12px 12px 12px 12px;
    background:none repeat scroll 0 0 #F7AA2B !important;
    color:#FFFFFF;
    display:block;
    float:left;
    font-size:18px !important;
    margin:0;
    padding:8px 18px !important;
    text-decoration:none;
    text-shadow:1pt 1pt 1pt #111111 !important;
    }
    #footer {
    background:url("http://wellnessbridge.org/images/bg-footer.png") no-repeat scroll center bottom transparent;
    float:left;
    margin:0;
    padding:0;
    width:100%;
    }
    #wrapper {
    background:none repeat-x scroll center bottom transparent;
    float:left;
    margin:0;
    padding:0;
    width:87%;
    }
    .content {
    background:none no-repeat scroll center top #FFFFFF;
    float:left;
    margin:0;
    padding:25px 0 0;
    width:1141px;
    }
    #bottom-content {
    background:none repeat-x scroll center top transparent;
    float:left;
    margin:0;
    padding:25px 0 15px;
    width:100%;
    }
    #right-panel h4 {
    color:#2699ED;
    float:left;
    font-size:38px;
    font-style:normal;
    font-variant:normal;
    font-weight:bold;
    letter-spacing:-1px;
    margin:0 0 20px;
    padding:0;
    text-shadow:1.5pt 1.5pt 1.5pt #BBBBBB !important;
    width:100%;
    }
    #services-banner {
    float:left;
    margin:0;
    padding:15px 0 50px;
    text-align:center;
    width:100%;
    }
    #footer-content #links {
    float:left;
    margin:0;
    padding:35px 0;
    width:100%;
    }
    #services-content {
    float:left;
    margin:0;
    padding:25px 92px 0;
    width:100%;
    }
    #sidebar .sidebar-end {
    background:none no-repeat scroll right bottom transparent;
    float:left;
    margin:0;
    padding:0 10% 35px 60px;
    width:100%;
    }
    #comments-template {
    border:1px solid #FFFFFF;
    float:left;
    margin:-25px;
    padding:15px 25px 25px;
    width:90%;
    }
    #page-navigation {
    float:left;
    margin:0;
    padding:25px 0 0;
    width:100%;
    }
    #header-name-alt {
    color:#2699ED;
    float:left;
    font-size:24px;
    line-height:35px;
    margin:12px;
    width:100%;
    }
    #header-name-alt span {
    color:#1E4D67;
    font-size:16px;
    }
    #nav li a {
    color:#505C63;
    display:block;
    float:left;
    font-size:12px;
    line-height:31px;
    margin:0;
    padding:0 13px 0 0;
    text-decoration:none;
    }
    .sidebar_list li {
    float:left;
    list-style-type:none;
    margin:0;
    padding:0 42px 20px;
    width:97%;
    }
    fieldset, img {
    border-style:none;
    border-width:0;
    padding: 0 42px 20px;
    }
    h2.services-brief {
    border-bottom:1px solid #EEEEEE;
    color:#000000;
    float:left;
    font-family:"Univers LT 55","Lucida Grande","Lucida Sans",Arial;
    font-size:25px;
    font-weight:normal;
    letter-spacing:-1px;
    margin:0;
    padding:0 0 20px;
    text-align:center;
    width:100%;
    }
    #intro-featured-img {
    background:url("http://wellnessbridge.org/images/bg-slideshow.png") no-repeat scroll center top transparent;
    border:0 none transparent;
    float:left;
    height:290px;
    margin:0;
    overflow:hidden;
    padding:0;
    width:430px;
    }

    Thanks again!

  • Mason

    Hiya wellness,

    Perhaps one of our theme designers can drop by and provide better help, but for me this is impossible to trouble-shoot without being able to see what's going on.

    Even with the code you provided above, I'd still need the actual images to recreate correctly what you're experiencing. Is there anyway we can take a look at the actual site - or can you use a live environment somewhere else with the theme so we can view it.

    Like I say, maybe others can help, but I'd have to see this to get a handle on what's going on.

    Thanks!