CSS Layout & Responsive Design
Educational Notes (Quick Links)
- HTML and CSS Basics
- Floating Elements
- Nested Elements
- Negative Margin & Float Layout
- ‘Float’ Over ‘Position’ Sometimes
- The ‘Position’ Property
- Adaptive Images
- Use Media Queries Sparingly
- CSS Inheritance
- Source Order, Specificity, And !important
- Display (Inline vs Block)
- Pseudo Elements
- Pseudo Classes
A Fluid Footer
Your layout should be almost completely fluid from top to bottom. All that remains are a few fluidity adjustments to the footer that you will be well versed in by now. Start by reviewing the fixed width elements in the footer:
GUI Method
Make the #colophon wrapper fluid
Make the #site-info div fluid
Make the #site-generator div fluid
Code Method
Start a new line in the code area and type the following code:
Some points to note:
Your fluid footer should now scale down on smaller screens: