HTML5 Frames Templates
These HTML5 frames templates use HTML5 and CSS to achieve that "frames" effect — without using any frames or frameset elements.
Why is this important? Traditionally, frames based websites used the frames or frameset tags to achieve the separate frames. Problem is, these elements are no longer supported in HTML. Starting from HTML5, these elements are obsolete. This means that if you need to create that "frames" effect, you need to use a method that doesn't use the traditional frames and frameset elements.
The following templates have been created without a frames or frameset element in sight. They use the CSS overflow property to achieve scrolling by using either overflow:scroll or overflow:auto.
HTML5 "Frames" — 2 Column, Left Menu
Left and right columns scroll independently of each other. This template is a "liquid layout", so it expands and contracts as you change your browser size.
HTML5 "Frames" — 2 Column, Right Menu
Left and right columns scroll independently of each other. This template is a "liquid layout", so it expands and contracts as you change your browser size.
2 Rows, A
Header frame and a bottom frame for the main content. Enable/disable scrolling as required. This template is a "liquid layout", so it expands and contracts as you change your browser size.
2 Rows, B
Footer frame and a top frame for the main content. Enable/disable scrolling as required. This template is a "liquid layout", so it expands and contracts as you change your browser size.
2 Rows, 2 Columns, A
Header frame and a left navigation frame. Header frame overlaps the left frame. Enable/disable scrolling as required. This template is a "liquid layout", so it expands and contracts as you change your browser size.
2 Rows, 2 Columns, B
Header frame and a left navigation frame. Left frame overlaps the header frame. Enable/disable scrolling as required. This template is a "liquid layout", so it expands and contracts as you change your browser size.
2 Rows, 2 Columns, C
Footer frame and a left navigation frame. Footer frame overlaps the left frame. Enable/disable scrolling as required. This template is a "liquid layout", so it expands and contracts as you change your browser size.
2 Rows, 2 Columns, D
Footer frame and a left navigation frame. Left frame overlaps the footer frame. Enable/disable scrolling as required. This template is a "liquid layout", so it expands and contracts as you change your browser size.
2 Rows, 2 Columns, E
Header frame and a right navigation frame. Header overlaps left frame. Enable/disable scrolling as required. This template is a "liquid layout", so it expands and contracts as you change your browser size.
2 Rows, 2 Columns, F
Header frame and a right navigation frame. Right frame overlaps header. Enable/disable scrolling as required. This template is a "liquid layout", so it expands and contracts as you change your browser size.
2 Rows, 2 Columns, G
Footer frame and a right navigation frame. Footer overlaps right frame. Enable/disable scrolling as required. This template is a "liquid layout", so it expands and contracts as you change your browser size.
2 Rows, 2 Columns, H
Footer frame and a right navigation frame. Right frame overlaps footer. Enable/disable scrolling as required. This template is a "liquid layout", so it expands and contracts as you change your browser size.
3 Rows, 2 Columns, A
Header & footer frames, plus a left navigation frame. Enable/disable scrolling as required. This template is a "liquid layout", so it expands and contracts as you change your browser size.
3 Rows, 2 Columns, B
Header & footer frames, plus a left navigation frame. Enable/disable scrolling as required. This template is a "liquid layout", so it expands and contracts as you change your browser size.
3 Rows, 3 Columns
Main content frame is surrounded by left/right/top/bottom frames. Enable/disable scrolling as required. This template is a "liquid layout", so it expands and contracts as you change your browser size.