>> CSS Layouts

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

Page Margin Web-Based Systems - Misbhauddin 3 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

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

TRY NOW Web-Based Systems - Misbhauddin 6 Center the wrapper for the provided file Edit CSS

Issue with using width Web-Based Systems - Misbhauddin 7 #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?

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

TRY NOW Web-Based Systems - Misbhauddin 9 Add all the background-colors for 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 Edit CSS

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

Box Model Issue Web-Based Systems - Misbhauddin 11 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.simple { width: 290px; }.advanced { width: 290px; padding: 30px; border-width: 10px; }

MATH Web-Based Systems - Misbhauddin 12 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

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

Web-Based Systems - Misbhauddin 14 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. 400px Column Layouts

Web-Based Systems - Misbhauddin 15 Column Layouts 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; } 400px

Web-Based Systems - Misbhauddin 16 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; }

Web-Based Systems - Misbhauddin 17 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. #para1 { width: 200px; float: left; } #para2 { width: 200px; float: right; } #container { border 1px solid black; }

Web-Based Systems - Misbhauddin 18 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; } #container { border 1px solid black; } #clear { clear: both;} The clear div specifying the end of floating elements Floats Issue – “Clear”

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

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

Announcement Reminder – Quiz-1 (Thursday 15/10/2015) – Material: HTML and CSS – Duration: 15 mins. – Starts-at: 09:05am (No extra time for late- comers)

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