Learning CSS
- Part 1: Introducing Selectors
- Part 2: Nesting Selectors
- Part 3: Backgrounds and Colors
- Part 4: Margins, Borders, and Padding
- Part 5: Positioning
- Part 6: Working with Fonts
Cascading StyleSheets (CSS) is a web technology designed for use with HTML. Using CSS allows for the separation of the presentation from the content and can help with customizing layout, colors, and accessibility settings.
Positioning
In general, there are three loose types of positioning in CSS: in-line, block, and containers. HTML elements like STRONG and EM are examples of in-line displaying. They are shown in-line with the other elements around them. Headers and the paragraph element use a block display: they influence and shift the elements around them because of default width and height values based on their content. The third type, containers, are those which group other elements, but are are treated as in-line unless a rule exists to override it.
When new CSS position rules are used on elements, they change how they are positioned in regard to their default rules and often in relation to the elements around or near them.
Float
The CSS rule of float is often explained as a type of “wrap.” That is, when the float rule is used on an element, it is removed from the normal display flow and shown “wrapped” on either end of its parent element or until it “runs” into an element that blocks it.
The float rule has two common values: left and right. Depending on which is used, the element will “float” to that end of the content with regard to its parent element.
Alignment
Aligning elements horizontally or vertically can be a difficult task because of the default display positioning of some elements. Text content, for example, can easily be aligned through using the text-align rule and specifying either left, right, or center.
For mixed content, or for containers with multiple elements, there is often not a single rule for making content centered or aligned in a single direction. The reason for this is in how the different display positions of block and in-line interact with each other: rules would need to be added to tell the in-line elements to work one way and to tell the block elements to change their defaults.
However, even with the general difficulties, two general solutions exist. The first is the use of margin: auto. Because the box model of CSS uses margins to balance the layout of content in regard to its left and right positioning, giving a container like the FOOTER tag a width, height, or both shifts it to use the block display positioning. Because it is now using the block display, the “auto” usage in a margin rule will make it horizontally aligned in relation to the other elements around it.
The second solution is to use a mix of top and bottom values in a padding rule to help in vertically alignment elements.
Position
While rules like float and text-align exist, there is also a rule called position that defines how an element should be displayed in regard to the screen itself. It has four possible values: static, relative, fixed, and absolute.
Paired with position are one or more of other rules defining which side of the screen to use as reference for the position. These are left, right, top, and bottom.
By default, elements use a position rule with a value of static. Setting a position of relative, however, in relation to its parent element. For example, to increase the indent of line items in both order and unordered lists, rules could be added to use position: relative and left: 5px to move all line-items five pixels away from their left edge.
The rules and values position: fixed and position: absolute vary in a small but very important way. On pages that do not scroll, they act the same.
However, the value of fixed is different than absolute. When an element is positioned with a value of absolute, it will retain in that place on the page. When using fixed, the element will seem to move as the page is scrolled, as it is “fixed” to the screen and not the document itself.
Codepen Example:
See the Pen Learning CSS: Part 5: Positioning by Dan Cox (@videlais) on CodePen.
Digital Ephemera 