HTML/CSS help
- Started
- Last post
- 10 Responses
- youngdesigner
So I need to create a layout in HTML. There will be a header, side navigation and main content area.
The header and side nav need to be fixed in place and stretch to fill the screen. The main content area ONLY needs to be scrollable. Basically similar to an email client like Gmail.
What would be the best approach to create a layout like this using CSS? Is using tables a good idea or is there another way to do it?
- albums0
No tables
100% width
Fixed positioningI believe the fixed side nav may be a bad idea as content could be clipped by browser variations.
- JamesBoynton0
Nah. Not tables. Used position:fixed on the elements you want to stick.
- youngdesigner0
OK the fixed positioning makes sense but how do I make the main content area fill the remaining space and be scrollable?
- youngdesigner0
Maybe Javascript is needed for something like this. It looks like Gmail uses scripting for its layout instead of just regular CSS.
- youngdesigner0
bump
- youngdesigner0
This achieves what I'm looking for http://layout.jquery-dev.net/dem…
Just wondered if it could be done with a jQuery plugin
- zaq0
try this http://twitter.github.com/bootst…
- youngdesigner0
^ That's a pretty good solution, but I need the content div to be scrollable like an iframe. On your layout I think the scrollbar shows up for the whole page.
Conclusion I came to...it can't be done with just CSS.
Thanks everyone
- what's the problem with it showing up for the whole page?dbloc
- dbloc0
try this
html, body {
overflow: hidden;
}#header {
position:fixed;
left: 100px;
top: 0;
width: 100%
height: 150px;
}sideNav {
position:fixed;
left: 0;
top: 0;
width: 100px;
}#content {
padding: 150px 0 0 100px;
overflow: scroll;
}