this should be easy : floated sidebar falls south of main content!

css nav bar issue

[moxieweb]

Hello. This is my first post here, although I have been reading the forums for a while now. My site is having problems with the smaller 600X800 resolution, and it also looks really ugly and poorly laid out in firefox. I need to have all the problems fixed before telling any possible cutomers to check it out.

When viewing it in IE7, at 1280X1024, the site looks fine. I prefer to use the larger resolution, but every article I have ready says NOT to neglect those users who use the 800X600. I used CSS to float the navbar left, on the right side of the main content.

The problem is, when the window is not wide enough, the navbar drifts to the bottom of the page, below the main content, on the left side of the screen, AND, my background color for the list items turns from dark brown to transparent, so you cannot read the links.

I improved the problem slightly by shrinking the width of the top banner logo, but I am still disappointed by these results.

Can anyone tell me how to fix the layout and/or contrast issues? Do I need to enclose both the nav bar and the main content in a single div and set a min-width? I really appreciate any advice that you can give me here.

Chris Sentman

My style sheet looks like this:

a:link {color: #443311; background: #ffffff url(grad3.jpg) repeat-y fixed;}
a:hover {color: #555555; background: #ffffff url(grad3.jpg) repeat-y fixed;}
a:visited {color: #443311; background: #ffffff url(grad3.jpg) repeat-y fixed;}
a:active {color: #555555; background: #ffffff url(grad3.jpg) repeat-y fixed;}
body {color: #332200; font-family: Tahoma, sans-serif; font-size: 10pt;

scrollbar-base-color: #40ffff;
scrollbar-arrow-color: #443311;
scrollbar-3dlight-color: #888888;
scrollbar-darkshadow-color: #255255;
scrollbar-face-color: #eeddbb;
scrollbar-highlight-color: #000066;
scrollbar-shadow-color: #005511;
scrollbar-track-color: #cc9955;
background: #ffffff url(grad3.jpg) repeat-y fixed;

}

#nav {margin: 0 0 0 0;
padding: 0;
text-align: center;
font-family: Tahoma, Arial, Sans-serif;
font-size: 1.1em;
font-variant: small-caps;}

/* We set the bottom margin of each list item to 3px and
we turn off the default bullet character. */
#nav li {
margin: 0 0 2px 0;
padding: 0;
list-style-type: none;
}

/* For navbar links only - We turn off underlines, assign
3px padding, a border, a background color, a text color
and we set the link to display block which makes it act
like a "button" */
#nav a, #nav a:visited {
text-decoration: none;
padding: 3px;
border: 1px solid #FFFFFF;
background-color: #443311;
color: #ffffee;
display: block;
}

/* the hover class is obvious. Active serves a dual purpose. In
all browsers, it is triggered when the mouse is down and
releases when the link loses focus. In IEPC it also is the
state of the link when tabbed to using the keyboard. Focus
is triggered when the link is tabbed to in browsers other
than IEPC. */
#nav a:hover, #nav a:active, #nav a:focus {
color: #ffffee;
background-color: #663366;
}

.centeredImage
{
text-align:center;
display:block;
margin-top:0px;
margin-bottom:0px;
padding:0px;

}

#topnav {float: right; width: 100%;
font-size: .85em; text-align: right; background: #ffffff url(grad3.jpg) repeat-y fixed;;
color: #101090; font-family: Verdana, sans-serif; font-variant: small-caps;
font-weight: bold;}

p {margin: 0px 30px 10px 0px;}
#main {float:left; width:85%; background: #ffffff url(grad3.jpg) repeat-y fixed;
height: 100%; text-align: right;
border-right: 2px dotted #443311;
border-bottom: 2px solid #443311;
padding-bottom: 20px; padding-right:20px; padding-left: 10px;
font-size: 1em; color: #000000; font-family: Tahoma, sans-serif;}
#side {float:left; width: 15%; height: 100%; background: #ffee99 url(grad4.jpg) repeat-all fixed;
border-bottom: 2px solid #443311;
padding-bottom: 20px; padding-right: 20px; padding-left: 10px;
font-size: 1em; color: #000000; font-family: Tahoma, sans-serif;}
h1 {color: #443311; font-family: Forte, Tahoma, sans-serif; letter-spacing: 5px;
font-variant: small-caps; background: #ffffff url(grad3.jpg) repeat-y fixed;}
h2 {color: #443311; font-family: Tahoma, sans-serif; font-style: italic;
background: #ffffff url(grad3.jpg) repeat-y fixed;}
h3 {color: #443311; font-family: Verdana, Tahoma, sans-serif; font-style: italic;
background: #ffffff url(grad3.jpg) repeat-y fixed;}

[edited by: encyclo at 12:15 am (utc) on Nov. 10, 2007]

[londrum]

it's probably the old padding problem with IE.
in firefox, and other browsers like opera, if you have a box that measures 100px (for arguments sake), and include 5px of padding, then the box will still measure 100px.
but IE will incorrectly add the padding to existing width - so you end up with a box that measures 110px --- 10px more than other browsers.
that's probably why your box is dropping below the other stuff in IE. it has run out of room.

try taking the padding out of #main and #side

one way around it is to apply margins to whatever is INSIDE the box.
ie, dont put padding on the containing <div>, but put a margin on the <p> inside it instead, or whatever it is.

(ps. ...someone will probably tell you off soon for dropping URLs like that. better scrub them off quick!)