0905 Head First HTML and CSS — Study Log #9

Chapter 11. Layout and Positioning: Arranging Elements

Keyword: float Liquid and frozen designs absolute positioning table display

Browsers place elements in a page using flow.
The top and bottom adjacent margins of two block elements in the normal page flow collapse to the size of the larger margin, or to the size of one margin if they are the same size.
CSS only allows you to float an element to the left or right.
The clear property is used to specify that no floated elements can be on the left or right (or both) of a block element. A block element with clear set will move down until it is free of the block element on its side.
A liquid layout is one in which the content of the page expands to fit the page when you expand the browser window.
A frozen layout is one in which the width of the content is fixed, and it doesn’t expand or shrink with the browser window.
A jello layout is one in which the content width is fixed, but the margins expand and shrink with the browser window. A jello layout usually places the content in the center of the page.
There are four values the position property can be set to:: static(default), absolute, fixed, and relative
The properties top, right, bottom, and left are used to position elements for absolute, fixed, and relative positioning.
CSS table display allows you to lay out your elements in a table-like layout.
- To create a CSS table display, use a block element for the table, block elements for the rows, and block elements for the cells. Typically, these will be <div> elements.
- Table display is a good layout strategy for multicolumn layouts where even columns of content are needed.
HTML should be all about structuring your content, and the CSS is what handles the layout.
❓How to float an element
1. Give the element an identity.
```
 <div id="identity"> </div>
```
2. Give the element a width. A requirement for any floating element is that it have a width.
```
 #identity{
  width: 30px;
 }
```
3. Float the element.
```
 #identity{
  width: 30px;
  float: right;
 }
```

Today’s practice:


  <div id="tableContainer">
      <div id="tableRow">


#header img#headerSlogan{
  float: right;
}

#award{
  position: absolute;
  top: 30px;
  left: 365px;
}
#tableContainer{
  display: table;
  border-spacing: 10px;
}

#tableRow{
  display: table-row;
}
#drinks{
  display:table-cell;
  background-color: #efe5d0;
  width: 20%;
  padding: 15px;
  vertical-align: top;
}
#main {
  display: table-cell;
  background:       #efe5d0 url(images/background.gif) top left;
  font-size:        105%;
  padding:          15px;
  vertical-align: top;
}

#sidebar {
  display: table-cell;
  background:       #efe5d0 url(images/background.gif) bottom right;
  font-size:        105%;
  padding:          15px;
  vertical-align: top;
}

#coupon{
  position: fixed;
  top: 550px;
  left: -90px;
}

#coupon a, img{
  border: none;
}

Word list

abbreviated

boundary

edge

compute

gutter

overlap

0904 Worked, read, and practiced IT Passport questions

0905 Learning and reading