Learning CSS: Part 5: Positioning

Learning CSS

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

Screenshot 2018-09-14 20.50.07

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.

Screenshot 2018-09-14 21.09.48

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

Screenshot 2018-09-14 21.14.01

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.

Screenshot 2018-09-14 21.34.12

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.

Screenshot 2018-09-14 21.46.49

The second solution is to use a mix of top and bottom values in a padding rule to help in vertically alignment elements.

Screenshot 2018-09-14 21.48.21

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.

Screenshot 2018-09-14 22.00.26

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.

Screenshot 2018-09-14 22.05.15

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.

Screenshot 2018-09-14 22.06.51

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.

Paragrph

Codepen Example:

See the Pen Learning CSS: Part 5: Positioning by Dan Cox (@videlais) on CodePen.

Mozilla Thimble Example:

Remix on Mozilla Thimble!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s