>> CSS Layouts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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