I hope you find these demos useful and that they will help you learn more about structuring CSS layouts. I strive to keep these code samples up to date and semantically correct. Building these demos has been very helpful to me since it gives a hands on approach to learning CSS which cannot be gained by reading alone. As I learn more I usually add new categories and improve my techniques. Cross browser compatibility is always my goal and I will normally make notes within the demos if it is not supported by specific browsers. If you are new to CSS it is important that you learn the basics first before diving into advanced techniques. My tutorial links page can provide many resources to help you Learn How CSS Works!

Happy Coding, Ray H.

 

Sticky Footers Etc.

• Basic Sticky Footer #1
• Basic Sticky Footer #2
• Basic Sticky Footer #3 with Faux Column
• Top Border Soak Up Method
• Negative Margin Footer Pull Method
• Full Width Two Column Sticky Footer
• Fixed Header with Sticky Footer
• Min Height 100% with Fixed Footer
• Simple One Column Layout

Two-Column

• Simple Two Column ~ Non-Equal Columns
• Equal Height Faux Columns Method
• Easy Equal Columns ~ Fixed Width
• Equal Columns with Left Sidebar
• Equal Columns with Right Sidebar
• The Bordered Sidebar Method
• Bordered Sidebar with Round Corners
• Equal Height AP Faux Columns
• AP Faux Columns ~ Stacked Sidebars
• Faux Columns ~ Stacked Main Divs
• CSS Table with IE6/7 Adaption
• Two Column Scrollbar Layout
• Main Content First in Source ~ Fixed Width

Two-Column Fluid & Elastic

• Fixed Width Sidebar with Min-Max Wrapper
• Main Content First in Source ~ Min-Max Width
• 25% Wide Sidebar with Min-Max Wrapper
• Elastic Sidebar with Conditional Elastic Wrapper
• Full Viewport with 250px Right Sidebar
• 50-50 Floats : Equal Height Columns with Borders
• 50-50 Floats : Non-Equal Columns with Borders
• 50-50 Divs with Borders

Three-Column

• Simple Three Column ~ Non-Equal Columns
• Easy Equal Columns ~ Fixed or Min-Max Width
• Full Height Sidebar Flush with Header & Footer
• Main Content First in Source Order ~ Fixed Width
• JS Tabbed Nav Divs ~ Degradable to Jump Links

Three-Column Fluid & Elastic

• Min-Max Three Column Sticky Footer
• Fixed Width Center with Fluid Side Columns
• Hybrid Layout ~ Conditional Elastic Wrapper
• Main Content First in Source Order ~ Min-Max Width

Four-Column Etc.

• Four Equal Columns & Full length Borders
• Four Equalizing Divisions within Two Columns
• CSS Fake Table with Four Columns
• Five Equal Columns & Full length Borders

Fixed Position Layouts

• Fixed to Browser Viewport - 1 Sidebar (Modern Browsers Only)
• Fixed to Browser Viewport - 2 Sidebars (Modern Browsers Only)
• Fixed Header, Footer & Sidebar (Modern Browsers Only)
• Vertical Centered 50% Height Fixed Sidebars
• Centered Layout with Fixed Footer & Sidebar
• Centered Layout with Fixed Header, Footer & Sidebars
• IE7 Fixed Position Bug ~ Triggered
• IE7 Fixed Position Bug ~ Squashed
• Fake Fixed Header & Footer with Scrolling Content
• Cross Browser "Full Width Header & Footer" - Centered Content
• Cross Browser "Centered Fixed Header & Footer"
• Cross Browser "Fixed Head-Foot-Side" - JQuery Script for IE6
• IE6 Fixed Position with Expressions

Navbars & Vertical Menus

• Highlight Current Page Navbar
• Rollover Navbar with Floats
• Fixed Width Buttons with Anchor Classes

• Suckerfish Drop Downs

  • Simple Dropdown #1
  • Simple Dropdown #2
  • Floated List Items with Dropdown
  • Centered Widthless Floats with Dropdown
  • Pop-Up with Floated List Items
  • Drop-Panel with Floated List Items

• Drop Line Navbars

  • Dropline Nav with Left Floated LI
  • Sliding Door Tabs with Dropline Sub-List
  • Dropline with Initial Current Page Highlighting
  • Dropline Nav with Centered Sub-List #1
  • Dropline Nav with Centered Sub-List #2
  • Dropline Nav with Centered Sub-List #3 (Webkit Fix)
  • Centered Inline Dropline

• Centered Inline-Block Navbars

  • Inline-Block List Items #1
  • Inline-Block List Items #2
  • Inline-Block List Items with Dropdown
  • Inline-Block List Items with Vertical Margins
  • Centered Inline-Blocks with Cross Browser Node Fix

• More Centered Navbars

  • Centered Widthless Floats
  • Centered Inline Navbar
  • Inline List with Bullet Images
  • Centered Tabbed Nav Menu

• Vertical Menus

  • Simple Vertical Menu #1
  • Simple Vertical Menu #2
  • Vertical Menu #1 with Flyout Submenu
  • Vertical Menu #2 with Flyout Submenu
  • Vertical Menu #3 with Overlapping Flyout

• CSS3 Hover Transitions

  • Fade-In Disjointed Rollover
  • Roll-Out Anchor with Fade-In BG Color
  • Slide-In Vertical Menu with Border-Radius & Box-Shadow

Image Captions & Galleries

• Auto Width Image Captions
• Floated Image Captions
• Inline-Block Image Captions
• Inline-Block Side Image Captions
• Inline-Block Top Image Captions
• Centering Images with Text-Align
• Centering Images with Text-Align in a UL
• The Problem with Floats and Unequal Heights
• Side Scrolling Gallery
• Min-Max Width ~ Side Scrolling Gallery
• Full Screen Side Scroll Gallery with Captions
• Two Column Thumbnail Gallery
• Disjointed Rollover Image Gallery

Inline-Block Tests

• Centering and Srink Wrapping with Inline-Block
• Background Image on Inline-Block Span
• Kill Whitespace Nodes without HTML/Margin Alterations
• Auto Width Wrapper Using Inline-Block (Not for IE)

Resizing HTML Images

• Auto Image Resize
• Auto Image Resize ~ Parent Sized in EMs
• Elastic Layout with Scaling Logo Image
• Scaling Fake Background Image

Round Corners & Dropshadows

• Flexible Round Corner Demo
• Flexible Single Image Dropshadow

Sandbag Floats

• Sandbag Float Pusher
• Sandbag Floats vs. Line-Heights
• Sandbag Floats with Javascript Bottom Float Pusher
• Scaling Sandbag Float Sized with EMs
• Top Sandbag Floats for Arched Text

Multiple Background Images with CSS 2.1

• Dual Top Background Images with Opaque Header
• Using background-position: with repeat-y
• Seaming Transparent no-repeat & repeat-y Images
• Multiple Background Images with Layered Divs
• Fixed Dual Side Background Images
• Full Height Border Images with Fluid Wrapper
• Page Specific Background Colors or Images

Vertical Centering

• Vertical Aligning Elements of Random Heights
• Vertical-Align with Line-Height
• Vertical Aligning Images within Lists Items
• Vertical Aligning Text within Lists Items
• Vertical Centering Random Wrapping Text Lines
• Vertical Centering Text in Fixed Height Div
• Wrapping List Items with Vertical Centered Text
• Easy Vertical Centering To Browser Viewport

Browser Bugs & Oddities

• IE 6-7 Add Parent's Top Padding to Last Float
• IE 6-7 Staircase Bug with Floated Anchor
• IE8 Inline-Block Test - A New Whitespace Bug
• IE8 Test: Unexpected text node after last child
• Opera 9-10 Float Test: Cleared div escaping float above
• Opera 10 Positioning Bug
• Webkit's Buggy Word-Spacing Model

Misc Stuff & Tests

• Collapsing margins
• No Collapsing Margins with Float and Clear
• Pseudo-Element Block Boxes
• Pseudo-Element Text Selectors
• Reverse Text-Indent on First-Line
• Floated Anchor with Cleared Text
• Inline Block Demo
• Multiple Hover Rules on One Element
• Highlight Two Elements On Hover
• Link Anchor on Entire Div
• Entire Element as Clickable Anchor
• Clickable Div with Pop Up
• Clickable Div with Pop Up ~ IE6 uses expression
• Clickable Div with Pop Down ~ IE6 Compatible
• Min-Height in IE6
• Disjointed Rollover
• Hanging Out with Negative Margins
• Centering Divs & Images
• Centering Text Between Floated Images
• Sliding Floats
• Simple Floated Image
• Bottom Float Pusher Using Javascript
• Preventing Text Opacity Inheritence
• Centering Absolute Positioned Elements
• Absolute Position to Containing Block
• EM Font-Size Scaling
• Float Test: Em Dimension Rounding
• Expanding Text Bracket
• Multi-Column OL with Counter-Reset
• Percentage Background Positions

Other CSS Demo Sites & Friends

• Paul O'Brien ~ "Raw CSS Examples"
• Eric Watson ~ "The Tools Page"
• Kravvitz ~ "Dynamic Site Solutions"

Return to Top