Introduction Clear & Float

Display & Position

The Display Property

The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet.

The most commonly used display properties are inline | inline-block | block | none

 1 div {
 2     	   display: inline;
 3         }
 4         div {
 5     	   display: inline-block;
 6         }
 7         div {
 8             display: block;
 9         }
10         div {
11             display: none;
12         }

HTML elements will be considered either a block-level element, or an inline-element by default.

The most commonly used block-level elements are div | p | pre | ul, ol | form | section | article

The most commonly used inline elements are a | span | i | input | select | label.

 View a full list of the available display properties and their behaviors here

Block

display:block will create a block-level element that does not allow other elements to the left or right of it by default when rendered on the page. A block-level element will generate whitespace at the top & bottom of itself causing another element to be forced to start on a new line.

1 .box {
2            display: block;
3            width:50px;
4            height:50px;
5            border:1px solid #39F;
6         }
 1 <!DOCTYPE html>
 2           <html>
 3             <head>
 4                 <title>CSS Lunch and Learn</title>
 5             </head>
 6             <body>
 7               <div class="box"></div>
 8               <div class="box"></div>
 9             </body>
10           </html>
The Result:

View the result 


Inline-Block

display:inline-block will create an inline element that allows other elements to the left or right of it by default when rendered on the page. An inline-block element can accept arguments for width and height.

1 .box {
2            display: inline-block;
3            width:50px;
4            height:50px;
5            border:1px solid #39F;
6         }
 1 <!DOCTYPE html>
 2           <html>
 3             <head>
 4                 <title>CSS Lunch and Learn</title>
 5             </head>
 6             <body>
 7               <div class="box"></div>
 8               <div class="box"></div>
 9             </body>
10           </html>
The Result:

View the result 


Inline

display:inline will create an inline element that allows other elements to the left or right of it by default when rendered on the page. An inline element does NOT accept arguments for width and height.

1 .box {
2            display: inline;
3            width:50px;
4            height:50px;
5            border:1px solid #39F;
6         }
 1 <!DOCTYPE html>
 2           <html>
 3             <head>
 4                 <title>CSS Lunch and Learn</title>
 5             </head>
 6             <body>
 7               <div class="box"></div>
 8               <div class="box"></div>
 9             </body>
10           </html>
The Result:

View the result 


None

display:none will completely hide an element from the viewport. None of its properties will effect the DOM until it is turned on again to one of the other display properties.

1 .box {
2            display: none;
3            width:50px;
4            height:50px;
5            border:1px solid #39F;
6         }
 View a full list of the available display properties and their behaviors here

display:none vs. visibility:hidden

There are serious differences between the behavior of both of these statements, even though the result you see in your browser is the same. One of the most notable differences is the effect on accessibility. A screen reader will not be able to access the contents of a div who has been hidden with display:none, because the element is hidden from the DOM all together. However, visibility:hidden will keep the contents of those elements in the DOM, but hide their effects from the rest of the web page.

1 .hidden {
2            visibility:hidden;
3         }
4         .none {
5             display:none;
6         }

visibility:hidden vs. opcacity:0

The other alternative to hiding content from the DOM and user is to use the opacity property. Opcaity effects the alpha channel of web page content, with a value ranging from 1 - 0. So something that is partly visible would have opacity declared like this:

1 .peekaboo {
2             opacity:.25;
3         }

The previous element would be 25% visible to the client.


Resources:

The Position Property

The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.

Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.

There are four different positioning methods.

Static - HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.

Static positioned elements are not affected by the top, bottom, left, and right properties.

Relative - A relative positioned element is positioned relative to its normal position. The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.

Relatively positioned elements are often used as container blocks for absolutely positioned elements.

Absolute - An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>

Fixed - An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled

Resources: