White space along right side - creates a scroll

http://designingyours.com/cater/index.html

I know it my left padding:

Content{
float: left;
width: 100%;
padding:15px 0 0 25px; margin: 0;
}

but I don’t know why it’s doing.

if I take it down to 0 it’s fine but I want that 25 padding-left

Padding is added to width, so your Content div is wider than 100%. You don’t need the width setting or the float. Just use this:

#content{
	padding:15px 0 0 25px; 
        margin: 0;
}

problem is without Content having a width if you were to make the website skinny it pushes the image slidshow down below all the text and i dont want that to happen.

** Never mind it is working now :slight_smile: **

Because you make your content div 100% + 25px :slight_smile: Why not add 25px margin to your text div so 95px instead of 70:


#text {
    width:450px;
    margin-left: 95px;
    padding-left:20px;
    float: left;
    display: inline; 
    background-color:white;
    border:1px solid #DFD7DC;
    font-family:Arial;
    font-size:10pt;
}

better to use padding and margins on the floating divs instead of the holding container.

I see what you’re saying donboe, thanks

Any reason when you make the site shorter the slideshow goes over the footer.

Weird thing is it doesn’t happen in firefox

In which browsers does this happen?

Hi,
You have three threads going on this same page now. The problems in all of your threads stem from a faulty sticky footer layout. Just stick with one thread and we will help you work out the bugs. :wink:

1.) Have a read through the FAQ to get a good foundation of how a proper sticky footer works.

FAQ : How do you put a sticky footer at the bottom of the window?

There are two different ways to handle the footer, but the footer still sits outside of the wrapper div with each method.

Top Border Soak Up Method
Negative Margin Footer Pull Method

2.) After reading and understanding the link above you will be able to eliminate the non semantic divs you are using such as:

<div class=“clearfooter”></div>

You don’t need to set floats with 100% widths on your Content and #footer divs either. As I mentioned already the reason you had to set 100% widths was to keep your floats from shrinkwrapping, and that was done when they did not even need to be floated. Block elements (divs) are 100% width by default so the only time you might need to set 100% width would be for haslayout in IE. There are other haslayout triggers though when that causes problems with padding etc.

3.) The problems your having right now in this thread are still due to the 100% widths. Your two floats are not being contained in your Content div now either. That is why they would have been spilling over the footer.

4.) It is important to get the Opera and IE8 min-height bug fixes in place. Once that is done your Content div will be containing it’s floats and a lot of your other issues will be resolved at the same time.

Here is a starting point of a working layout that is similar to what you are doing with your page. It has all the bug fixes in place with min-widths on #wrapper and #footer. :slight_smile:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Full Width Sticky Footer</title>

<style type="text/css">
html, body {
    height:100%; 
}
body {
    margin:0;
    padding:0;
    font:100%/1.3 arial, helvetica, sans-serif;
}  
h1,h2 {
    margin:0; 
    padding:10px 0; 
    text-align:center;
    font-size:1.6em;
}
h2 {font-size:1.4em;}

p {margin:10px;} 

/*=== Float Containment and Bug Fixes (Do Not Alter These!) ===*/
body:before {/*Opera min-height 100% Fix*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/*Another Opera fix*/
}
#wrapper:after,  /* #wrapper:after for IE8 min-height:100% Fix*/
#content:after { /* #content:after for Float Containment*/
    clear:both;
    content:"";
    display:block;
    height:1%;/*IE8 min-height:100% bug fix*/
    font-size:0;
}

#wrapper {
    min-height:100%;
    min-width:1020px;
    margin-top:-60px;/* pull it through the top of the viewport (same as footer height)*/
    background:#CCC;
}
* html #wrapper {height:100%;} /* height = "min-height" in IE6 */

#header {
    height:120px;/*100px with bottom border*/
    border-top:60px solid red;/* reclaim the wrapper negative top margin footer soak-up */
    border-bottom:1px solid #000;
    background:#959595;
}
#content {
    min-height:0;/*haslayout IE7 = (float containment)*/
    padding:0 50px 50px;
}
* html #content {display:inline-block;}/*haslayout IE6 = (float containment)*/

.left,.right {
    float:left;
    width:48%;
    background:#FFF;
    text-align:justify;
    line-height:1.6;
}
.right {
    float:right;
}
#footer {
    height:59px;
    min-width:1020px;
    overflow:hidden;
    border-top:1px solid #000;
    background:#959595;
}
#footer p {
    text-align:center;
    font-weight:bold;
}
</style>

</head>
<body>    
    
<div id="wrapper">
    <div id="header">
        <h1>Full Width Sticky Footer</h1>
    </div>  
    <div id="content">
        <h2>Page Title</h2>
        <div class="left">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
            Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
            lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
            adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
            sociis natoque penatibus et magnis dis parturient montes, nascetur
            ridiculus mus.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
            Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
            lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
            adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
            sociis natoque penatibus et magnis dis parturient montes, nascetur
            ridiculus mus.</p>
        </div>
        <div class="right">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
            Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
            lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
            adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
            sociis natoque penatibus et magnis dis parturient montes, nascetur
            ridiculus mus.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
            Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
            lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
            adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
            sociis natoque penatibus et magnis dis parturient montes, nascetur
            ridiculus mus.</p>
        </div>         
    </div>
</div>
<div id="footer">
    <p>Footer Stuff</p>
</div>  
 
</body>
</html>

put another div under Content and add padding to this div.

Unfortunately that will not solve the problem and it is just adding useless markup in the html. The FAQ link I posted above will explain how to build a proper sticky footer.

Thanks for the patience guys, it seems every time I change something, somethign else breaks.

Should I not use any padding or margin on my content div, is that bad practice? I’m trying to clean up my style sheet.

Should I not use any padding or margin on my content div, is that bad practice? I’m trying to clean up my style sheet.

It not bad practice, you just can’t add side paddings to 100% width as Ralph pointed out. As long as your not supporting IE5 (which is not needed these days) then you won’t have problems either.

You failed to readjust your min-width on #wrapper and #footer after you added the side padding to Content. You just have to keep up with what your doing, it’s called the box model. Margins, paddings, borders and widths all must be taken into account for the total dimensions.

You still have other problems in IE8 and Opera though as I pointed out above.

I have pulled your files down, let me go through and clean them up and I will post back.

I’m at work atm so I haven’t been able to make any changes just yet, and at work all I have is IE7 so I can’t do much here.

I’m not sure if my site design is a bit whacky?

I basically have/want a fixed width site, but if the user widens their browser I want the header, body bkg-img, and footer to repeat to the right.

This is only my second website, so a lot is being thrown at me, just trying to soak it all in and understand!

I just read alll about the box model so that really helped, thanks!

Okay, the first thing we needed to do was clean up the html and get a strict doctype on it.

You don’t need to be building new pages with transitional doctypes, they are not in transition, they are new pages. A strict doctype will enforce proper markup. :wink:

I will post back with the CSS shortly, for now you will see that I cleaned out unnecessary divs in the #nav and that
empty .clearfooter div that I mentioned earlier.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="page.css" rel="stylesheet" type="text/css" media="screen">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="scripts/menu.js"></script>   
    <title>Splendid Fare Catering</title>
</head> 

<body> 
<div id="wrapper">
    <div id="header">
        <p class="logo"><a href="index.html" title="Splendid Fare Catering Logo"></a></p>
        <p class="glasses"></p>
        <p class="swirl"></p>           
        <ul id="main">
            <li><a class="home" href="index.html"><span>home</span></a></li>    
            <li><a class="about" href="about.html"><span>about</span></a></li>        
            <li><a class="events" href="events.html"><span>events</span></a></li>
            <li><a class="partners" href="partners.html"><span>partners</span></a></li>
            <li><a class="contact" href="contact.html"><span>contact</span></a></li>
            <li><a class="testimonials" href="testimonials.html"><span>testimonials</span></a></li>
        </ul>    
    </div><!--  End header  -->

    <div id="content">
        <h1>Welcome</h1>
        <div id="underline"></div>
        <div id="tagline">
            Make sure to check out our <a href="/cater/docs/thanksgiving.pdf">Thanksgiving flyer</a> for menu and prices!
        </div>
        <h2>
            Splendid Fare Catering provides clients throughout the Northeast 
            Ohio area with professional full-service catering and event planning.
        </h2>
    
        <div id="text">
            <p>Since 1981, our imaginative approach to catering has served a variety of social and 
            corporate clients including but not limited to:</p> 
            <ul>
                <li>cocktail parties</li>
                <li>buffets and plated dinners</li>
                <li>weddings</li>
                <li>social and corporate celebrations</li>
            </ul> 
            <p>Our reputation for exciting food begins with our philosophy of utilizing regional and 
            seasonal foods, continues as we create tantalizing menus drawn from world cuisines, and 
            culminates in distinctive design.</p>
            <hr>
            <p>Call us for fabulous stress free entertaining!</p>
            <ul id="contact">
                <li>Susan Parish Schwab, chef/owner</li>
                <li>splendidfarecatering.com</li>
                <li>330.836.6346</li>
                <li class="email"><a href = "mailto:spfare@hotmail.com">spfare@hotmail.com</a></li>
            </ul>
        </div>                   
        <div id="slideshow">
            <img class="picstyle1" src="/cater/images/1.jpg" alt="#">
            <img class="picstyle1" src="/cater/images/2.jpg" alt="#">
            <img class="picstyle1" src="/cater/images/3.jpg" alt="#">
            <img class="picstyle1" src="/cater/images/4.jpg" alt="#">
            <img class="picstyle1" src="/cater/images/5.jpg" alt="#">
            <img class="picstyle1" src="/cater/images/6.jpg" alt="#">
            <img class="picstyle1" src="/cater/images/7.jpg" alt="#">
        </div>
    </div><!--  End content  -->
</div><!-- End of wrapper -->

<div id="footer">
    <div id="cs_logo">
        <a href="http://www.catersource.com"><img src="site_images/catersource.png" alt="#"></a>
    </div>
    <ul id="info">
        <li>Splendid Fare Catering Inc.</li>
        <li>All Rights Reserved 2010</li>
        <li>Medina, Ohio</li>
    </ul>
</div>

</body> 
</html> 

I see you took out <div id=“nav_right”>

That’s the div I setup with a bkg-img to repeat-x in my CSS, so the nav bar extends out.

^ Yeah, that div was not needed. The only reason you had it there to continue the BG image was because you had set a fixed width on your nav. Let it default to 100% width and the BG image will continue on without an extra div. :wink:

I also removed the <div id=“underline”></div> and moved that BG image to the h1. Be sure to remove that div from your html as I can’t edit the code above now.

Here is your reworked CSS with all major issues taken care of. There are still some things I don’t like about the nav spans being set to display:none but we can cover that later on. It needs a real image replacement technique.

page.css


body, html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    font:100%/1.3 arial, helvetica, sans-serif;
}
/* some small resets */
h1,h2,p,ul,ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
a {
    text-decoration: none;
}
img {
    border:0 none;
}

/*=== Float Containment and Bug Fixes (Do Not Alter These!) ===*/
body:before {/*Opera min-height 100% Fix*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/*Another Opera fix*/
}
#wrapper:after,  /* #wrapper:after for IE8 min-height:100% Fix*/
#content:after { /* #content:after for Float Containment*/
    clear:both;
    content:"";
    display:block;
    height:1%;/*IE8 min-height:100% bug fix*/
    font-size:0;
}

#wrapper {
    min-height: 100%;
    min-width: 1020px;/*stop BG from clipping (and float drop in #content)*/
    margin-top:-60px;/* pull it through the top of the viewport (same as footer height)*/
    background: url(site_images/bkg.png);
}
* html #wrapper {height:100%;} /* height = "min-height" in IE6 */

/*  Header  */
#header {
    height:170px; /*.swirl height + #nav height (haslayout IE)*/
    position:relative;/*containg block for AP children*/
    border-top:60px solid red;/* reclaim the wrapper negative top margin footer soak-up */
    background: #51504e;
}
.logo {
    height: 128px;/*was 132px (give some space between nav anchors)*/
    width: 358px;
    position: absolute;
    top:0; left:0;
    background: url(site_images/logo.png) no-repeat;
}
    .logo a {
        display:block;
        height: 100%;
        width: 100%;
    }
.glasses {
    height: 166px;
    width: 361px;
    position: absolute;
    top:0; left:660px; /* 685px;*/
    background: url(site_images/shrimp.png) no-repeat;
}

#header .swirl {
    height:131px; /*this positions nav to the bottom*/
    background: url(site_images/header.gif) repeat-x;
}

/*  Navigation  */
#main {
    height: 39px;
    background: url(site_images/nav_extra.gif) repeat-x;
}
#main span {
    display: none;
}
#main li, #main li a {
    float: left;
}
#main li a {
    height: 39px;
    background: url(site_images/nav_sprite.jpg) no-repeat;
}
#main li a.home {
    background-position: 0px 0px;
    width: 48px;
}
#main li a:hover.home {
    background-position: 0px -39px;
    width: 48px;
}
#main li a:active.home {
    background-position: 0px -78px;
    width: 48px;
}
#main li a.about {
    background-position: -48px 0px;
    width: 87px;
}
#main li a:hover.about {
    background-position: -48px -39px;
    width: 87px;
}
#main li a:active.about {
    background-position: -48px -78px;
    width: 87px;
}
#main li a.events {
    background-position: -135px 0px;
    width: 86px;
}
#main li a:hover.events {
    background-position: -135px -39px;
    width: 86px;
}
#main li a:active.events {
    background-position: -135px -78px;
    width: 86px;
}
#main li a.partners {
    background-position: -221px 0px;
    width: 97px;
}
#main li a:hover.partners {
    background-position: -221px -39px;
    width: 97px;
}
#main li a:active.partners {
    background-position: -221px -78px;
    width: 97px;
}
#main li a.contact {
    background-position: -318px 0px;
    width: 99px;
}
#main li a:hover.contact {
    background-position: -318px -39px;
    width: 99px;
}
#main li a:active.contact {
    background-position: -318px -78px;
    width: 99px;
}
#main li a.testimonials {
    background-position: -417px 0px;
    width: 126px;
}
#main li a:hover.testimonials {
    background-position: -417px -39px;
    width: 126px;
}
#main li a:active.testimonials {
    background-position: -417px -78px;
    width: 126px;
}
/*  Submenu  */
/* Make submenu not appear until hover is initiated #main li ul {
    position: absolute;
    margin-left: 0 0 0 -1px;
}
#sub {
    position: absolute;
    margin-left: 0 0 0 -1px;
}
.sublink {
    margin-left: -9999px;
}
/* This is how the submenu <ul> will be displayed #main li:hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0;
}
*/
/* This is how the <li> of the submenu will be displayed, float:none is breaking the horizontal rule and putting it in a vertial order*/
#main li:hover li {
    float: none;
}
/* Style for submenu text */
#sub a {
    background-image: none;
    background-color: #51504e;
    display: block;
    font-family: Arial;
    font-size: 10pt;
    color: white;
    border: 1px solid #111;
    width: 75px;
    height: 30px;
    padding-left: 5px;
}
#sub a:hover {
    background-color: #826579;
}
/* fix ie6 small issue */
/* we should always avoid using hack like this */

*html #main_nav ul {
    margin: 0 0 0 -2px;
}
#main #sub li a {
    background-image: none;
}

/* Content */
#content {
    min-height:0;/*haslayout IE7 = (float containment)*/
    padding: 15px 0 25px 25px;
    /*background:red;*/
    position:relative;/*containg block for AP children*/
}
* html #content {display:inline-block;}/*haslayout IE6 = (float containment)*/

h1 {
    width: 300px;
    font: 30pt/1.3 "Apple Chancery";
    padding: 0 0 23px 23px; /*bottom padding for BG image*/
    margin: 0 0 15px 50px;
    color: #826579;
    font-weight: 100;
    letter-spacing: 4px;
    background: url(site_images/underline.png) no-repeat 0 100%;
}
/*#underline {
    moved to h1 background
}*/

#tagline {
    position: absolute;
    top: 90px; /*265px;*/
    left: 655px;
    width: 300px; /*316px total*/
    padding: 8px;
    /*height: 37px;*/
    background: #faf8fa;
    font-family: Geneva, Arial;
    font-size: 10pt;
    text-align: center;
}
h2 {
    font-family: Geneva, Arial;
    font-size: 9.5pt;
    font-weight: 125;
    text-align: center;
    padding: 10px 0 0 56px;
    margin-bottom: 30px;
    width: 500px;
}
#text {
    float: left;
    width: 450px; /*562px total box*/
    margin: 0px 0 0 70px;
    padding:0 20px 10px;
    font: .8em/1.3 arial, helvetica, sans-serif;
    background: #FFF;
    border: 1px solid #dfd7dc;
}
    #text p {
        margin:1em 0;
    }
    #text ul {
        padding:0 0 0 3em;
        list-style:disc;
    }
    ul#contact {
        list-style:none;
    }
    #text hr {
        /*width: 400px;
        margin-left: 10px;*/
        background: #826579;
        color: #826579;
    }

#slideshow {
    float: left;
    width: 316px; /*386px total box*/
    height: 416px;
    margin: 0px 0 0 70px;
    overflow: hidden;
}
#slideshow img {
    position: absolute;
}
#slideshow .picstyle1 {
    border: 8px solid #4a4743;
    width: 300px;
    height: 400px;
}


/* FOOTER */
#footer {
    height: 58px; /*60px total*/
    min-width: 1020px;/*stop BG from clipping*/
    border-top: 2px solid #96cfbf;
    background: url(site_images/grad_bot.gif) repeat-x;
    overflow:hidden;
}
#cs_logo {
    float: left;
    width: 205px;
    height: 32px;
    margin: 10px 0 0 10px;
    display:inline; /*IE6*/
}
#info {
    float: right;
    margin:8px 10px 0 0;
}
#info li {
    color: #FFF;
    text-align: right;
    font:bold 11px/1.2 "Century Gothic";
}

Oh and one more thing, the problem which you described in your thread title
“white space along right side - creates a scroll”
was caused by your left:685px; position of the .glasses div.

It exceeded the min-width of the page, you gotta do your math correctly! :slight_smile:


.glasses {
    height: 166px;
    width: 361px;
    position: absolute;
    [COLOR=Blue]top:0; left:660px;[/COLOR] [COLOR=Red]/* 685px;*/[/COLOR]
    background: url(site_images/shrimp.png) no-repeat;
}

K I replaced my html and css…

still dont quite get this one though.

#header {
height:170px; /.swirl height + #nav height (haslayout IE)/
position:relative;/containg block for AP children/
border-top:60px solid red;/* reclaim the wrapper negative top margin footer soak-up */
background: #51504e;
}

Some of that red border is now visible

still dont quite get this one though.

Some of that red border is now visible

Hi,
As noted in the comment that top border is to reclaim the negative top margin on the #wrapper div.

You have something wrong somewhere though. For one you are missing the < > brackets on your doctype and it is being ignored.

I just got in a little while ago and I was reworking several other things too. I have removed a lot of the Absolute Positioning (AP) on that page and got those elements in the page flow.

I also set a width on the Content div and centered it up in the #wrapper.

I’ll load the files up to my server here in a bit and show you what I have done with it. I think you will like the looks of it better. :wink: