CODEWITHSUNDEEP
csspositionoverflowfixed
VaN
VaN

Reputation: 2210

Positionning overflow content under fixed header and between fixed sidebars

I'm trying to design a site with a fixed header and fixed sidebars, on a 100% height body. The only problem is I can't place the content correctly, it goes over my header.

See this fiddle : http://jsfiddle.net/3FwNM/

I tried to put 

margin:100px 0 0 0;

to my #content, but it push it and then a scrollbar appears on the body, I want to avoid that. Scrollbar should appear only on #content.

http://jsfiddle.net/3FwNM/2/

Any help would be appreciated

Upvotes: 0

Views: 67

Answers (1)

Adam Botley
Adam Botley

Reputation: 702

SOLUTION

One trick here is to add box-sizing: border-box to #primary and #secondary. This prevents the padding at the top from increasing the height beyond 100%

Info on box-sizing property

EDIT: updated with vendor prefixes for box-sizing

Upvotes: 1

Related Questions