CODEWITHSUNDEEP
css
madprops
madprops

Reputation: 4023

Make header and side divs to stick while center one scrolls

I have this layout

Div structure

I need the header, col2(left) and col3(right) to stick in their position while the center one scrolls (col1).

Upvotes: 3

Views: 5872

Answers (4)

alex
alex

Reputation: 490263

position: fixed is exactly what you want to do this.

body {
   padding-top: 100px;
}

#header {
   width: 100%;
   height: 100px;
   position: fixed;  
   top: 0;
   left: 0;
}

jsFiddle.

Update

You should probably just give that internal element an explicit height and add overflow-y: auto.

Upvotes: 2

larissa
larissa

Reputation: 493

With position:fixed should do what you want, provided you have your other positioning attributes correct - I assume you would want to attach it to the top left corner of the screen, so your code would look like:

#header {
  position:fixed;
  top:0;
  left:0;
}

If that doesn't work, position:absolute, again with the proper positioning attributes, should do the trick.

EDIT: To comply with OP's edited question. If I'm understanding your question correctly (please comment if I'm not and I'll look at it again), then you want this:

#header {
  position:fixed;
  top:0;
  left:0;
}

#colleft {
  position:relative;
}

#col2 {
  position:absolute;
  /*top: however many px you want col2 to be below the top of colleft
    left: however many px you want col2 to be indented*/
}

#col3 {
  position:absolute;
  /*top: however many px you want col2 to be below the top of colleft (should be same as col2
    left: however many px you want col2 to be indented (the left positioning of col2 + its width + some padding)*/
}

Upvotes: 0

ar3
ar3

Reputation: 4063

If it disappears behind the colmask, you have to put top-margin on colmask, because header is no longer being processed in the document.

Also, make the header have a higher z-index than the rest of the elements if you want it over the other elements.

Upvotes: 0

Danpe
Danpe

Reputation: 19047

The only way i think is to place all the page inside an except the header.

that will keep the header on top.

<header>
    Text Text Text
</header>
<iframe src="page.html" width="100%" height="100%">
     <p>Your browser does not support iframes.</p>
</iframe>

But i'm pretty sure there are alot of better ways

Upvotes: 0

Related Questions