asked on

Header and content question

What CSS would I use by where my header div stays pinned to the top of the screen vs scrolling and the content div scrolls 'appears' to scroll underneath?

SOLUTION

soupBoy

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

thenrich

ASKER

As soon as I make the header fixed it pushes the content div to the top and underneath it?

soupBoy

Once you start playing with the 'position' rule in your css things can get a little out of whack if you didn't plan for it.

soupBoy

If you want some help with it, please post some of your code.

thenrich

ASKER

#mainContainer
{
display: block;
position: relative;
width: 100%;
margin-bottom: 100px;
-webkit-text-size-adjust: none;
background-image: url('/Ballyhoos/art/new_bg.png');
background-repeat: no-repeat;
background-position: center top;
z-index:999
}
#pinnedFooter
{
display: block;
position: fixed;
width: 100%;
height: 90px;
bottom: 0px;
z-index: 1000;
background-image: url('/Ballyhoos/art/pinnedFooterBG.png');
background-repeat: repeat-x;
background-position : center bottom;
-webkit-text-size-adjust: none;
}
#header
{
position:fixed;
width:100%;
z-index:999999;
}

#contentContainer
{

margin-left :auto;
margin-right :auto;
width:900px;
font-family: Verdana;
font-size: small;
}

HTML Structure
<div>mainContainer>
<div>header
<div>contentcontainer
<div>pinnedFooter

thenrich

ASKER

If I could just push that contentContainer down we'd have it as the header is indeed behaving. For whatever reason if I top pad the contentContainer the header goes with?

thenrich

ASKER

Here is pic of what is happening.

thenrich

ASKER

Wait!

I think I pretty much have it except my contentContainer div is scrolling behind the header div.

ASKER CERTIFIED SOLUTION

COBOLdinosaur

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

thenrich

ASKER

With a little hacking I was able to get the look I was seeking.

He it is in my sandbox:
http://www.ogtechllc.com/Ballyhoos/default.aspx

Still under construction of course but I think you get the idea :-)

COBOLdinosaur

Nice effect! The page is a little busier than I care for but looks great. Good luck with it.

Cd&