Lecture 6
CSS (part 3)
Ketan Mayer-Patel
University of North Carolina
Block vs. Inline
- Block elements
- Inline elements
- Default layout
- Inline elements: "in line" with text.
- Block elements: width of parent, height as needed
- Example 1
Width and Height
- width and height attributes
- Only for block elements
- Affects where margin/padding/border located
- Using "auto" as margin value to align block
- Example 2
Floating
- float attribute
- left, right, none (default)
- Removes element from normal layout flow
- Allows text, and sibling elements to flow around
- Good idea to set width
- Multiple floats to the same side will push up against each other.
- Example 3
Floating Nuances
- Placement in document still matters.
- Floats are not supposed to be placed higher than where they would have been if not floated.
- Layout of text/elements located between floating elements in document may alter floating placement in subtle ways.
- Example 3-1
Floating Nuances, cont'd.
- Floats are not accounted for in parent's height
- overflow attribute controls what happens
- visible, hidden, scroll
- scroll only works well with height specified
- Block element boxes extend underneath floats
- Example 4
Clearing Floats
- clear attribute will push a block element past any floats
- left, right, both, none (default)
- Example 5
Positioning
- position attribute
- relative, absolute, fixed, static - default
- top, bottom, left, right
- Specifies positions of box corners
- Positioning tutorial
Display and Visibility
- display attribute
- inline, block, none, ...
- Can be used to set CSS box model associated with an element
- None is useful for hiding content entirely
- visibility attribute
- hidden, visible - default
- Still lays out the element, but then does not show it
- Compare with "display: none"
- Example 6