How to Center in CSS

CSS

CSS3-logo

Centering in CSS is a giant pain in the neck. Depending on the scenario, there are multiple ways to go about it, but it’s never fun.

How to Center in CSS is a code generator that consolidates all the possible techniques and gives you the code you need for each situation. Well Done!

howtocenterincss.com

What are the Four Types of Position in CSS, and How Do They Differ?

CSS

JavaScript LogoIf you are a Front-End Web Developer you absolutely must be comfortable discussing CSS positioning. In this article, we’ll take a close look at each of the four types of position in CSS and how they differ

Static Positioning

“static” is probably the easiest of all four values to explain. It is the default position for any HTML element. Even when you do not specify a position value, the value of “static” is applied to that element’s position property. The easiest way to define the “static” positioning value is that when assigned, an HTML element behaves exactly as you would expect. I say this because you have probably written hundreds if not thousands of lines of CSS where you did NOT specify the position value. When you do not specify the position value, the value is “static”, and the behavior is what you would normally expect from an HTML element.

Fixed Positioning

“fixed” is the second easiest of all four values to explain. When fixed positioning is applied, an html element is positioned absolutely, relative to the browser window. It is completely removed from the document flow and has no physical effect on any other element in the DOM. The “top”,”bottom”, “left” and “right” properties can be used to “nudge” the element around, but that is it: nothing else will move that element away from its “fixed” position. Even when the document is scrolled, the target element retains its “fixed” position, relative to the browser window.

Example # 1 A

Example # 1 B

In Example # 1A, the element with the class “.fixed” is nudged 25px in two directions. What can be deceiving is that these values are “offset from”. So, if you specify a “right” value of “25px”, the element will be moved 25px “from” the right (i.e. not “to” the right). So, the effect can be the opposite of what you might expect. The JsFiddle.net link below provides an expanded demonstration of this.

Here is the JsFiddle.net URL for Example # 1A: http://jsfiddle.net/WRuDs/

In Example # 1B, the element with the class “.fixed” is again nudged 50px in two directions. The difference here is that a negative value has been provided for the “right” property. The net result is that the element appears to be nudged “in the direction of” the specified property (i.e. 50px “to” the right), so it appears cut-off because it is 50px out of view. The JsFiddle.net link below provides an expanded demonstration of this.

Here is the JsFiddle.net URL for Example # 1B: http://jsfiddle.net/sLGz7/

Relative Positioning

When the “relative” value has been provided for the “position” property, the specified element will be positioned relative to its normal flow in the document. This may seem a bit odd at first, but think of it this way: When you simply position the element relatively, and do nothing else, nothing happens visually. But if you then specify a “top”, “bottom”, “left” or “right” value, then the element is moved in whatever direction you specified, in the amount specified (i.e. pixels, inches, em, etc…).

An important note about relative positioning is that the element’s effect on the document flow does not change. For example, if you position an element relatively and assign the “top” to “-25px” and the “left” to “-25” it will appear 25px higher and to the left of where it would normally appear in the document. But as far as the DOM is concerned, that element’s position has not changed. The point here is that “nudging” an element in any direction has no effect on the DOM. The effect is purely visual. When you look at the JsFiddle.net example link below, you can see this exact behavior in the element with the class “upAndOver”. The element appears “nudged” up 25px and over 25px, but the space that it would have normally occupied in the document flow is very much in plain sight (i.e. its “up and over” appearance has not affected the document flow).

Example # 2

Here is the JsFiddle.net link for an expanded version of Example # 2: http://jsfiddle.net/etAKb/

Absolute Positioning

When an element is positioned absolutely, it is positioned absolutely relative to the nearest containing element that has positioning. The browser will traverse the DOM starting with the element’s containing parent and then its descendants, until it finds one that is positioned relative, absolute or fixed. When it finds one, then it positions the target element absolutely, relative to that containing element. If it does not find a containing element and reaches the HTML element, then the target element is positioned absolutely, relative to the HTML element.

Just as with relative and fixed positioning, “top”, “bottom”, “left” or “right” values can be provided so that the exact location of the element can be specified. Unlike relative positioning, an absolutely positioned element is completely removed from the document flow and has no physical effect on any other element in the DOM. However, a byproduct of absolute positioning is that the target element will appear to have its “z-index” higher than any element that it comes into visual contact with. By default, it will appear “on top of” any element that it overlaps with. Any siblings of the target element that share the same absolute positioning will appear “on top” of the previous sibling, in the order in which they appear in the markup.

For working examples of CSS Absolute Positioning, see my earlier post: CSS Absolute Positioning – The Basics | Kevin Chisholm – Blog

Summary

In this article we learned about CSS Positioning. We learned about static, fixed, relative and absolute. In each case, we learned how the target element interacts with the natural document flow

Helpful Links for CSS Positioning

https://developer.mozilla.org/en-US/docs/Web/CSS/position

http://alistapart.com/article/css-positioning-101

http://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/

http://www.codecademy.com/courses/web-beginner-en-6merh

http://blog.teamtreehouse.com/css-positioning

CSS Interview Questions – Margin and Padding

CSS

Before you go into that Front-End Web Developer interview, make sure you’ve got your CSS Margin and Padding facts down.


Q: Which is closer to the content, margin or padding?
A: Padding is closer to the content
Hint: http://www.w3.org/TR/CSS2/box.html


Q: What is the order of the Margin and Padding CSS shorthand syntax?
A: Top, Right, Bottom, Left

Hint: The order is clockwise


Q: How do you set the margin-top and margin-bottom values of a purely inline element?
A: You can’t. Inline elements can only have left and right margins.

Hint: http://stackoverflow.com/questions/1134779/why-do-bottom-padding-and-bottom-margins-not-help-to-add-vertical-spacing-betwee


Q: True or False: Margin and Padding values can be set in percentages.
A: True

Hint: http://stackoverflow.com/questions/4982480/how-to-set-the-margin-or-padding-as-percentage-of-height-or-parent-container


Q: When you see the the following, what is the web developer likely trying to do? margin: 0 auto
A: Center an element

Hint: http://css-tricks.com/snippets/css/centering-a-website/


Q: Which is furthest away from the content: Margin or Border?
A: Margin

Hint: http://www.htmldog.com/guides/cssbeginner/margins/


Q: Can Margin and Padding values be expressed in inches?
A: Yes

Hint: http://www.w3.org/Style/Examples/007/units.en.html


Q: If you wanted more of an element’s background-color to show, which value would you increase, Margin or Padding?
A: Padding. The Margin is outside of the background color.

Hint: http://www.w3.org/TR/CSS2/box.html


Q: Do Margins of inline-block boxes collapse?
A: No

Hint: http://www.w3.org/TR/CSS2/box.html#collapsing-margins


Q: When specifying a margin value as a percentage, what is that number a percentage of?
A: It is calculated with respect to the width of the generated box’s containing block.

Hint: http://www.w3.org/TR/CSS2/box.html#margin-properties

CSS Absolute Positioning – The Absolute Basics

CSS

JavaScript LogoAbsolute positioning is one of the four types of CSS “position” values

When an element is given absolute positioning, the following behavior takes place: 1 – The element is positioned in the top-left-most corner of the nearest parent element that has positioning (this is the default), 2 – If no parent elements have positioning, then the element is positioned in the top-left-most corner of the browser window and 3 – You can use the “top”,”left”,”bottom” and “right” properties to place the element absolutely as you need.

Example # 1

In Example # 1, we have set up three container DIVs. If you look at the class names, you’ll see that there is an outermost DIV: “grand-parent”, an inner DIV: “parent” and an innermost DIV: “child”. When you look at the jsFiddle.net example, there is simply a big yellow box (the grand-parent), a smaller red box inside of the yellow box (the parent), and a small green box inside of the red box (the child).

I’ve set the height property for each element so that we don’t need to concern ourselves with any text nodes; so it’s just three empty DIVs, which look like a box, within a box, within a box.

Here is the jsFiddle.net link for Example # 1: http://jsfiddle.net/tK8hH/

Example # 2

An absolutely positioned element will be positioned relative to the nearest parent with positioning.

In Example # 2, we gave the “child” DIV absolute positioning, and set the bottom and right properties to 0. When you look at the jsFiddle.net link, the green box is in the bottom-right-hand corner of the screen. The reason for this is that an absolutely positioned element will be positioned relative to the nearest parent with positioning (i.e. “absolute”, “relative” or “fixed”). If no parent (i.e. containing) elements up the DOM have positioning, then the element will be positioned relative to the browser window. So, in this case, the green box is positioned absolutely, relative to the browser window. Because the “bottom” and “right” properties are both set to “0”, the green box appears in the bottom-right corner. If you change it to “top:0;”, then the green box will appear in the TOP-right corner of the browser window.

Here is the jsFiddle.net link for Example # 2: http://jsfiddle.net/7U8cN/

Example # 3

In Example # 3, we gave the “parent” element relative positioning. This has no visual effect on the “parent” element, but it does change things quite a bit for the green “child” DIV. Because the “parent” now has positioning, the green “child” DIV appears in the lower-right-hand corner of the red “parent” DIV. This is because it is now positioned absolutely, relative to the red “parent” DIV. Here is the jsFiddle.net link for Example # 3: http://jsfiddle.net/4KUWc/

Example # 4

In Example # 4, we have changed the red “parent” DIV’s positioning to “absolute” and given the yellow “grand-parent” DIV “relative” positioning. So let’s run down what is happening here:

  • The red “parent” DIV is positioned absolutely, 300px to the right, and 50px from the top of the yellow “grand-parent” DIV
  • The green “child” DIV is positioned absolutely, -50px from the bottom, and -50px from the right of the red “parent” DIV.

If you look at the jsFiddle.net link for Example # 4, you’ll see that the red box is now sticking outside of the right side of the yellow “grand-parent” DIV, and the green “child” DIV is sticking outside of the red “parent” DIV, 50px to the right, and 50px towards the bottom.

Here is the jsFiddle.net link for Example # 4:

Summary

CSS Absolute Positioning is quite a useful tool when it comes to nudging elements to exactly where you want them to be. So the key to mastering absolute positioning in CSS is to remember two rules:

  1. An absolutely positioned element will be positioned relative to the nearest parent or ancestor element that is positioned relative or absolute
  2. If there are no positioned parents, the element will be positioned absolutely, relative to the browser window