SlideShare a Scribd company logo
1 of 24
Mr. Thien Tran Quang
CSS Slicer
kuangthien@gmail.com
 Box Model
 Page Layout
 Positioning
 What is this?
 How works it?
Three-dimensional visualization of the CSS box model
Remember: the width property declares the width of the
element’s contents, not its box.
 Introduction
 Equal height problem
Fixed Layout

“What the designer sees, the
user sees”
Fluid Layout

“Flexible for
differents screen
resolution”
Elastic Layout

Mixes the two other
main layout types. It
works by sizing all
elements with em‘s.
The height of each column is depend the contents in
                       column.
Key: Relative position property .
Key: Background Repeat Property
 Position:static | relative | absolute | fixed
 Floating and Clearing
Mystery of Float
Clearing
Float column
and “footer
problem”
“Footer
problem” and
solution
Css page layout

More Related Content

Viewers also liked

End User Computing (EUC)
End User Computing (EUC)End User Computing (EUC)
End User Computing (EUC)Jashisha Gupta
 
Introduction To Computers
Introduction To ComputersIntroduction To Computers
Introduction To ComputersDoug Baldwin
 
CSS Layout Techniques
CSS Layout TechniquesCSS Layout Techniques
CSS Layout TechniquesHarshal Patil
 
Chapter 01 - Introduction to Computers
Chapter 01 - Introduction to ComputersChapter 01 - Introduction to Computers
Chapter 01 - Introduction to ComputersAchmad Solichin
 
CSS Box Model Presentation
CSS Box Model PresentationCSS Box Model Presentation
CSS Box Model PresentationReed Crouch
 
CSS Layouting #3 : Box Model
CSS Layouting #3 : Box ModelCSS Layouting #3 : Box Model
CSS Layouting #3 : Box ModelSandhika Galih
 
Template & Content Control (Basics) - Microsoft Word 2013
Template & Content Control (Basics) - Microsoft Word 2013Template & Content Control (Basics) - Microsoft Word 2013
Template & Content Control (Basics) - Microsoft Word 2013Coco Tan
 
CSS, CSS Selectors, CSS Box Model
CSS, CSS Selectors, CSS Box ModelCSS, CSS Selectors, CSS Box Model
CSS, CSS Selectors, CSS Box Modeljamiecavanaugh
 
Introduction to computers
Introduction to computersIntroduction to computers
Introduction to computersTushar B Kute
 
Introduction to computers pdf
Introduction to computers pdfIntroduction to computers pdf
Introduction to computers pdfblufishocean
 
End User Computing
End User ComputingEnd User Computing
End User ComputingMudit Dhebar
 
Layout with CSS
Layout with CSSLayout with CSS
Layout with CSSMike Crabb
 
Peter Norton’s Introduction to Computers
Peter Norton’s Introduction to ComputersPeter Norton’s Introduction to Computers
Peter Norton’s Introduction to ComputersUjjwal 'Shanu'
 
5.1 css box model
5.1 css box model5.1 css box model
5.1 css box modelBulldogs83
 
Presentation microsoft office 2013 akshay
Presentation microsoft office 2013 akshayPresentation microsoft office 2013 akshay
Presentation microsoft office 2013 akshayAkshay Singh
 
The New CSS Layout - dotCSS
The New CSS Layout - dotCSSThe New CSS Layout - dotCSS
The New CSS Layout - dotCSSRachel Andrew
 
Microsoft word ppt presentation
 Microsoft word  ppt presentation Microsoft word  ppt presentation
Microsoft word ppt presentationvethics
 

Viewers also liked (20)

End User Computing (EUC)
End User Computing (EUC)End User Computing (EUC)
End User Computing (EUC)
 
Introduction To Computers
Introduction To ComputersIntroduction To Computers
Introduction To Computers
 
CSS Layout Techniques
CSS Layout TechniquesCSS Layout Techniques
CSS Layout Techniques
 
Chapter 01 - Introduction to Computers
Chapter 01 - Introduction to ComputersChapter 01 - Introduction to Computers
Chapter 01 - Introduction to Computers
 
CSS Box Model Presentation
CSS Box Model PresentationCSS Box Model Presentation
CSS Box Model Presentation
 
CSS Box Model
CSS Box ModelCSS Box Model
CSS Box Model
 
Css box model
Css  box modelCss  box model
Css box model
 
CSS Layouting #3 : Box Model
CSS Layouting #3 : Box ModelCSS Layouting #3 : Box Model
CSS Layouting #3 : Box Model
 
Template & Content Control (Basics) - Microsoft Word 2013
Template & Content Control (Basics) - Microsoft Word 2013Template & Content Control (Basics) - Microsoft Word 2013
Template & Content Control (Basics) - Microsoft Word 2013
 
CSS, CSS Selectors, CSS Box Model
CSS, CSS Selectors, CSS Box ModelCSS, CSS Selectors, CSS Box Model
CSS, CSS Selectors, CSS Box Model
 
Introduction to computers
Introduction to computersIntroduction to computers
Introduction to computers
 
Introduction to computers pdf
Introduction to computers pdfIntroduction to computers pdf
Introduction to computers pdf
 
End User Computing
End User ComputingEnd User Computing
End User Computing
 
Layout with CSS
Layout with CSSLayout with CSS
Layout with CSS
 
Peter Norton’s Introduction to Computers
Peter Norton’s Introduction to ComputersPeter Norton’s Introduction to Computers
Peter Norton’s Introduction to Computers
 
5.1 css box model
5.1 css box model5.1 css box model
5.1 css box model
 
All ms word 2013
All ms word 2013All ms word 2013
All ms word 2013
 
Presentation microsoft office 2013 akshay
Presentation microsoft office 2013 akshayPresentation microsoft office 2013 akshay
Presentation microsoft office 2013 akshay
 
The New CSS Layout - dotCSS
The New CSS Layout - dotCSSThe New CSS Layout - dotCSS
The New CSS Layout - dotCSS
 
Microsoft word ppt presentation
 Microsoft word  ppt presentation Microsoft word  ppt presentation
Microsoft word ppt presentation
 

Similar to Css page layout

Laying Out Elements with CSS
Laying Out Elements with CSSLaying Out Elements with CSS
Laying Out Elements with CSSNicole Ryan
 
ADF - Layout Managers and Skinning
ADF - Layout Managers and SkinningADF - Layout Managers and Skinning
ADF - Layout Managers and SkinningGeorge Estebe
 
HTML Frameset & Inline Frame
HTML Frameset & Inline FrameHTML Frameset & Inline Frame
HTML Frameset & Inline FrameNisa Soomro
 
Advanced CSS.pptx
Advanced CSS.pptxAdvanced CSS.pptx
Advanced CSS.pptxDiyonaVas
 
CSS Foundations, pt 2
CSS Foundations, pt 2CSS Foundations, pt 2
CSS Foundations, pt 2Shawn Calvert
 
CSS3 basics for beginners - Imrokraft
CSS3 basics for beginners - ImrokraftCSS3 basics for beginners - Imrokraft
CSS3 basics for beginners - Imrokraftimrokraft
 
TIBCO General Interface - CSS Guide
TIBCO General Interface - CSS GuideTIBCO General Interface - CSS Guide
TIBCO General Interface - CSS GuideRohan Chandane
 
05.Blend Expression, Transformation & Animation
05.Blend Expression, Transformation & Animation05.Blend Expression, Transformation & Animation
05.Blend Expression, Transformation & AnimationNguyen Tuan
 
CSS for basic learner
CSS for basic learnerCSS for basic learner
CSS for basic learnerYoeung Vibol
 
Web performance fundamental
Web performance fundamentalWeb performance fundamental
Web performance fundamentaljvinhit
 
Sane CSS - A modern approach to CSS
Sane CSS - A modern approach to CSSSane CSS - A modern approach to CSS
Sane CSS - A modern approach to CSSLee Cheneler
 
3 css essentials
3 css essentials3 css essentials
3 css essentialsAnchu S
 
"Smarter Responsive Design" by Sam Otis
"Smarter Responsive Design" by Sam Otis"Smarter Responsive Design" by Sam Otis
"Smarter Responsive Design" by Sam OtisBlend Interactive
 
3-CSS_essentials.ppt
3-CSS_essentials.ppt3-CSS_essentials.ppt
3-CSS_essentials.pptdatapro2
 

Similar to Css page layout (20)

Laying Out Elements with CSS
Laying Out Elements with CSSLaying Out Elements with CSS
Laying Out Elements with CSS
 
Web Layout
Web LayoutWeb Layout
Web Layout
 
Lec 2
Lec 2Lec 2
Lec 2
 
ADF - Layout Managers and Skinning
ADF - Layout Managers and SkinningADF - Layout Managers and Skinning
ADF - Layout Managers and Skinning
 
HTML Frameset & Inline Frame
HTML Frameset & Inline FrameHTML Frameset & Inline Frame
HTML Frameset & Inline Frame
 
Html frames
Html framesHtml frames
Html frames
 
Advanced CSS.pptx
Advanced CSS.pptxAdvanced CSS.pptx
Advanced CSS.pptx
 
CSS Foundations, pt 2
CSS Foundations, pt 2CSS Foundations, pt 2
CSS Foundations, pt 2
 
Tutorial5
Tutorial5Tutorial5
Tutorial5
 
Tutorial5
Tutorial5Tutorial5
Tutorial5
 
CSS3 basics for beginners - Imrokraft
CSS3 basics for beginners - ImrokraftCSS3 basics for beginners - Imrokraft
CSS3 basics for beginners - Imrokraft
 
TIBCO General Interface - CSS Guide
TIBCO General Interface - CSS GuideTIBCO General Interface - CSS Guide
TIBCO General Interface - CSS Guide
 
uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 html
 
05.Blend Expression, Transformation & Animation
05.Blend Expression, Transformation & Animation05.Blend Expression, Transformation & Animation
05.Blend Expression, Transformation & Animation
 
CSS for basic learner
CSS for basic learnerCSS for basic learner
CSS for basic learner
 
Web performance fundamental
Web performance fundamentalWeb performance fundamental
Web performance fundamental
 
Sane CSS - A modern approach to CSS
Sane CSS - A modern approach to CSSSane CSS - A modern approach to CSS
Sane CSS - A modern approach to CSS
 
3 css essentials
3 css essentials3 css essentials
3 css essentials
 
"Smarter Responsive Design" by Sam Otis
"Smarter Responsive Design" by Sam Otis"Smarter Responsive Design" by Sam Otis
"Smarter Responsive Design" by Sam Otis
 
3-CSS_essentials.ppt
3-CSS_essentials.ppt3-CSS_essentials.ppt
3-CSS_essentials.ppt
 

Recently uploaded

"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...apidays
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbuapidays
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsNanddeep Nachan
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusZilliz
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxRustici Software
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Zilliz
 

Recently uploaded (20)

"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 

Css page layout