XHTML - Positional CSS for Layout
Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.
XHTML - Positional CSS for Layout
This course is part of XHTML Front-End Web Design with CSS Specialization
Included with
Skills you'll gain
Tools you'll learn
Details to know
See how employees at top companies are mastering in-demand skills
Build your subject-matter expertise
- Learn new concepts from industry experts
- Gain a foundational understanding of a subject or tool
- Develop job-relevant skills with hands-on projects
- Earn a shareable career certificate
There are 3 modules in this course
This course empowers learners to analyze, apply, and design modern web layouts using XHTML and CSS. Beginning with a critical examination of traditional layout techniques such as frames and tables, the course transitions into practical mastery of CSS float-based layouts, including multi-column designs and form alignment.
Through progressive modules, learners will construct responsive layouts using fluid and Jello layout techniques, organize content using semantic HTML lists, and develop interactive navigation menus purely with CSS. The final module guides learners to demonstrate control over page composition using absolute, fixed, and relative positioning strategies, while leveraging z-index for layering and visual hierarchy. By the end of the course, learners will be able to implement professional-grade web layouts with precision, semantic structure, and responsive behavior—without relying on outdated techniques or JavaScript.
This module introduces learners to the limitations of traditional HTML layout techniques and transitions into the use of CSS float properties for modern, flexible web designs. It explores the fundamentals of float behavior with block elements, images, paragraphs, and forms, leading up to practical multi-column layout construction.
What's included
10 videos4 assignments
10 videos•Total 76 minutes
- Drawbacks Of Traditional Layout•7 minutes
- Binary Encoding And Flash Web Pages•8 minutes
- Float With The Block Level Element•8 minutes
- Float Attribute With Image•9 minutes
- Float With Paragraph•7 minutes
- Float With Paragraph Continues•6 minutes
- Float With Forms•11 minutes
- Creating A 2 Column Design•8 minutes
- Tuning Up The Borders•7 minutes
- Creating A 3 Column Design•6 minutes
4 assignments•Total 60 minutes
- Understanding Traditional Layout Challenges•10 minutes
- Mastering Floats with Common HTML Elements•10 minutes
- Complex Layouts Using Floats•10 minutes
- CSS Float-Based Layout Foundations•30 minutes
This module deepens understanding of responsive design through advanced layout strategies like the Jello layout and the use of min-height. It progresses to building and styling list-based menus with vertical, horizontal, and nested list structures. Interactivity using hover effects and real-world menu techniques are also covered.
What's included
10 videos4 assignments
10 videos•Total 82 minutes
- Using Min-Height Attribute•7 minutes
- Jello Layout•8 minutes
- Examples Jello Layout•9 minutes
- Extra Examples•11 minutes
- Vertical List•8 minutes
- Horizontal Lists•7 minutes
- Nested Lists•6 minutes
- Hover Effect•9 minutes
- Creating Menus with CSS•9 minutes
- Examples of Creating Menus with CSS•9 minutes
4 assignments•Total 60 minutes
- Responsive and Jello Layout Techniques•10 minutes
- Building Lists and Navigation Menus•10 minutes
- Real-World Menu Creation with CSS•10 minutes
- Advanced Layouts and Menu Structures•30 minutes
This final module explores positioning strategies beyond float, including absolute, relative, and fixed positioning. Learners will understand layering with z-index and learn to construct complex layouts with precise control over element stacking and placement.
What's included
8 videos3 assignments
8 videos•Total 63 minutes
- Absolute Positioning•9 minutes
- Working and Managing with Z-index•6 minutes
- Page Layout with Absolute Positioning•8 minutes
- Examples Page Layout with Absolute Positioning•9 minutes
- Fixed Position•6 minutes
- Relative Position•9 minutes
- Extra Examples for Using Alternative Positioning•10 minutes
- Extra Examples for Using Alternative Positioning Continue•7 minutes
3 assignments•Total 50 minutes
- Absolute Positioning and Layering•10 minutes
- Fixed, Relative & Advanced Positioning•10 minutes
- CSS Positioning Masterclass•30 minutes
Earn a career certificate
Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.
Explore more from Mobile and Web Development
- Status: Free TrialE
EDUCBA
Course
- Status: Free Trial
Course
- Status: Free Trial
Course
- Status: Free Trial
Why people choose Coursera for their career
Frequently asked questions
To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.
When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.
Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.
More questions
Financial aid available,