1. >> CSS Layouts

2. Welcome Recall Properties of Box Border Area Padding Area Content Area
Margin Area
Border Area
Padding Area
Welcome
Content Area
Properties of Box
Border (style, width, color)
Padding
Margin
Display
Background
Dimension

3. Web-Based Systems - Misbhauddin
Page Margin
Most websites online are centered
How can we do this?
Wrap the whole body inside a wrapper (like a candy)
And then play with the margin values of the wrapper
Web-Based Systems - Misbhauddin

4. <div id=“wrapper”>
<div id=“header”></div>
<div id=“sidebar”> </div>
<div id=“content”></div>
<div id=“footer”></div>
</div>
Web-Based Systems - Misbhauddin

5. Web-Based Systems - Misbhauddin
Pre-requisite
Download the css_layout.zip file
Unzip the file
Open the css_layout.html file in the editor
Create a new css file called style.css and save it inside the css folder
Link the css inside the html file using <link> tag.
Note: The output_css_layout.png file includes the requirements for the final output – color, size, margin and so on
Web-Based Systems - Misbhauddin

6. Web-Based Systems - Misbhauddin
Centering the Wrapper
#wrapper {
margin: 0 auto; }
Note: This will not work until you define a width for the wrapper.
Web-Based Systems - Misbhauddin

7. Web-Based Systems - Misbhauddin
Issue with using width
#wrapper {
width: 900px;
margin: 0 auto; }
What will happen when the browser window is smaller than the width of your wrapper?
CHECK IT NOW – RESIZE YOUR BROWSER WINDOW
HOW CAN WE AVOID THAT?
Web-Based Systems - Misbhauddin

8. Use max-width property instead of width
TRY NOW
Edit CSS
Use max-width property instead of width
Will improve the browser's handling of small windows
This is important when making a site usable on mobile
Web-Based Systems - Misbhauddin

9. TRY NOW
Edit CSS
Add all the background-colors for the body and the div tags
Change the text colors of all the items
Use proper text-align for all items
Change the font-size of the h1 element
Web-Based Systems - Misbhauddin

10. Use height and width property (Dimension)
TRY NOW
Edit CSS
Resize the three DIV inside the “About” div tag according to the size provided
Use height and width property (Dimension)
Web-Based Systems - Misbhauddin

11. Web-Based Systems - Misbhauddin
Box Model Issue
When you specify the width and height of an element:  the element can actually appear bigger than what you set. 
Reason: The element's border and padding will stretch out the element beyond the specified width
.advanced {
width: 290px;
padding: 30px;
border-width: 10px; }
.simple {
width: 290px; }
Web-Based Systems - Misbhauddin

12. MATH Hence, you will need to do some math.
And for some (or maybe many) MATH is not fun
Solution:
CSS provides another property called “box-sizing” and if you set its value to “border-box” the padding and border of that element no longer increase its width
.advanced {
width: 290px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 30px;
border-width: 10px; }
Box-Sizing is a new property.
It is not supported by all browsers.
That is why we add these.
They are called Vendor Prefixes
-moz- => Mozilla based browsers
-webkit- => For Webkit based such as Safari
Web-Based Systems - Misbhauddin

13. How to make the three DIV inline
Solution 1
Use display inline
Not really. Remember what happened in the last class
Use float
What is float?
Web-Based Systems - Misbhauddin

14. Web-Based Systems - Misbhauddin
Column Layouts
400px
This is a block of random text created to show the usage of an important property in CSS which allows creating of 2-3 column layouts which are among the most popular layouts in web design.
This property is called “Float”. What this property does is that it makes the element just simply float on the browser space. But using this property can be tricky. You need to set the width, margins and paddings appropriately to align them correctly together to finally come as a column layout.
<div id=“para1”> …….. </div>
<div id=“para2”> …….. </div>
Web-Based Systems - Misbhauddin

15. Web-Based Systems - Misbhauddin
Column Layouts
400px
This is a block of random text created to show the usage of an important property in CSS which allows creating of 2-3 column layouts which are among the most popular layouts in web design.
This property is called “Float”. What this property does is that it makes the element just simply float on the browser space. But using this property can be tricky. You need to set the width, margins and paddings appropriately to align them correctly together to finally come as a column layout.
#para1 {
width: 200px; }
#para2 {
width: 200px; }
<div id=“para1”> …….. </div>
<div id=“para2”> …….. </div>
Web-Based Systems - Misbhauddin

16. Web-Based Systems - Misbhauddin
Column Layouts
400px
This is a block of random text created to show the usage of an important property in CSS which allows creating of 2-3 column layouts which are among the most popular layouts in web design.
This property is called “Float”. What this property does is that it makes the element just simply float on the browser space. But using this property can be tricky. You need to set the width, margins and paddings appropriately to align them correctly together to finally come as a column layout.
#para1 {
width: 200px;
float: left; }
#para2 {
width: 200px;
float: right; }
<div id=“para1”> …….. </div>
<div id=“para2”> …….. </div>
Web-Based Systems - Misbhauddin

17. Web-Based Systems - Misbhauddin
Float Issue
This is a block of random text created to show the usage of an important property in CSS which allows creating of 2-3 column layouts which are among the most popular layouts in web design.
This property is called “Float”. What this property does is that it makes the element just simply float on the browser space. But using this property can be tricky. You need to set the width, margins and paddings appropriately to align them correctly together to finally come as a column layout.
<div id=“container”>
<div id=“para1”> …….. </div>
<div id=“para2”> …….. </div>
</div>
#container {
border 1px
solid black; }
#para1 {
width: 200px;
float: left; }
#para2 {
width: 200px;
float: right; }
Web-Based Systems - Misbhauddin

18. Web-Based Systems - Misbhauddin
Floats Issue – “Clear”
This is a block of random text created to show the usage of an important property in CSS which allows creating of 2-3 column layouts which are among the most popular layouts in web design.
This property is called “Float”. What this property does is that it makes the element just simply float on the browser space. But using this property can be tricky. You need to set the width, margins and paddings appropriately to align them correctly together to finally come as a column layout.
The clear div specifying the end of floating elements
#clear { clear: both;}
<div id=“container”>
<div id=“para1”> …….. </div>
<div id=“para2”> …….. </div>
<div id=“clear”></div>
</div>
#para1 {
width: 200px;
float: left; }
#para2 {
width: 200px;
float: right; }
#container {
border 1px
solid black; }
Web-Based Systems - Misbhauddin

19. TRY NOW Edit CSS File Use float to align the columns in one line
Use a clear div within the About Div
Web-Based Systems - Misbhauddin

20. Set the display property of the container (About Div) as inline-block;
Want to make it easier?
Using inline-block
Set the display property of the container (About Div) as inline-block;
No need for clear div anymore

21. Next on Web-based Systems
Cascading Style Sheets
Navigation in CSS