1. Webpage layout using CSS
The box model
SE-2840 Dr. Mark L. Hornick

2. The <div> element is used to group block-level elements together
html
html
body
body
head
head h1 p p p h1
div p
title
title p p
strong
strong em em em em em
strong em
strong
SE Dr. Mark L. Hornick

3. A <div> element usually contains an id or class attribute
html
Setting the style on a <div> element affects all nested elements
Provides a way to split a document into sections of related content whose presentation should be similar
body
head h1
div p
title p p
strong em em em
strong
SE Dr. Mark L. Hornick

4. The CSS box model
The box model applies to both block and inline elements
From the perspective of CSS, every element in an HTML doc is a box, including
Content area
Imaginary element box surrounding text (or image)
Optional Padding
The space between Content and Border; default is 0px
Optional Border
Various widths, styles, colors; default is invisible
Optional Margin
The space between Border and other elements; default is 0px
SE Dr. Mark L. Hornick

5. Without Padding, Border, or Margin
SE Dr. Mark L. Hornick

6. Padding and Margins can be simultaneously specified for all 4 sides…
<style type="text/css">
body {
margin: 30px;
border: 5px solid gray;
padding: 20px; }
</style>
SE Dr. Mark L. Hornick

7. …or individually <style type="text/css"> body {
margin-right: 30px;
margin-top: 5px;
margin-left: 100px;
border: 5px solid gray;
padding: 20px;
padding-right: 100px;
padding-bottom:80px; }
</style>
SE Dr. Mark L. Hornick

8. The width and height properties of elements can also be specified
The width attribute specifies the width of the content area only
Total width = left-margin + right-margin + left-border + left-padding + content + right-padding + right-border + right-margin
SE Dr. Mark L. Hornick

9. The Flow is what a browser uses to layout HTML elements
The browser flows block elements from top to bottom, inserting a line break between each
<h1>…</h1>
<div>
</div>
<p>…</p>
<p>…</p>
<p>…</p>
SE Dr. Mark L. Hornick

10. Every character and element in a line of text is represented by an inline box
<h1> </h1>
text
text
Inline elements are flowed from top-left to bottom-right
Note this is similar to Java Swing’s Flow Layout
For text, the inline box size depends on the font size and the value of the line-height attribute
<div>
</div>
<p> </p>
text
img a
text em
span
<p> </p>
text
<p> </p>
img
img
SE Dr. Mark L. Hornick

11. Flow proceeds horizontally from left to right as long as there is room on the right
<h1> </h1>
text
text
<h1> </h1>
text
text
<div>
</div>
<div>
</div>
<p> </p>
text
img a
<p> </p>
text
img
text em
span a
text em
span
<p> </p>
text
<p> </p>
text
<p> </p>
img
img
<p> </p>
img
img
SE Dr. Mark L. Hornick

12. Static is the default positioning scheme applied to elements by the browser
There are four basic types of positioning
static (normal, the default)
relative
absolute
fixed
<style type="text/css">
body {
/* default! */
position: static; }
</style>
SE Dr. Mark L. Hornick

13. Relative positioning uses nearest nesting element as the containing block
The element’s “theoretical” position w.r.t. computation of normal flow is preserved
But the element is actually positioned w.r.t. the containing block
The adjacent elements behave like the relative block was in the static position
<style type="text/css">
#a {
position: relative;
top: 70px;
left: 50px; }
</style>
SE Dr. Mark L. Hornick

14. Absolute positioning removes an element from the normal flow
The element’s position w.r.t. normal flow is eliminated
Remaining normal elements are used in the flow as if the absolutely positioned element did not exist
<style type="text/css">
#id1 {
position: absolute;
top: 70px;
left: 50px;
width: 100px;
z-index: 5; }
</style>
Note: Elements in the normal flow always appear beneath positioned elements
Z-index only applies to positioned elements
Z-index specifies the stack order of elements (higher numbers in front, and negative numbers are valid)
SE Dr. Mark L. Hornick

15. Absolute elements are positioned with respect to their nearest containing ancestor…
…whose position is not specified as static
Here, the blue <div> is the nearest containing element, but it is part of the normal flow (static)…
…so the green element defaults to being positioned w.r.t the <body> or <html> element
SE Dr. Mark L. Hornick

16. Fixed positioning uses the browser window as the containing block
Position is always fixed with respect to the browser window
<style type="text/css">
#a {
position: fixed;
top: 70px;
left: 50px;
width: 100px; }
</style>
SE Dr. Mark L. Hornick

17. Floating an element is another way of positioning it
The floated element’s position with respect to normal flow is eliminated
…but the remaining normal elements respect the boundary of the floated element
contents of the normal flow elements will flow around it the floated element
A floated element should be given a specific width
the green element is floated w.r.t the blue <div>
SE Dr. Mark L. Hornick

18. An element floats w.r.t. the element immediately above it
the green element is floated after the yellow <p>
SE Dr. Mark L. Hornick

19. An element can be floated either left or right
the green element is floated w.r.t the <body>
the green element is floated w.r.t the <div>
SE Dr. Mark L. Hornick