CSS Layout Crash Course An Advance CSS Tutorial

Inline vs. Block Many HTML elements have a default display setting of Block. Block elements take up the full width of space available and have a line break before and after it. Examples: & & & & & Other HTML elements have a default display setting of Inline. Inline elements take up only the amount of space they need for their content and do not force any line breaks. Examples:

Remember the Box Remember when executing a layout in CSS that every HTML element can be thought of as a box and therefore they can all have padding, margin and border properties applied to them to alter the amount of space they occupy and how close they are to other objects.

Dimensions Dimensions of an element can be set using any of these properties: height width max-height max-width min-height min-width These are set using the auto, pixel, percentage or inherit values.

Positioning The Position Property allows you to position an element and specify what should happen when an elements 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 will work differently depending on the position method chosen. There are four different positioning methods.

Static Positioning 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.

Fixed Positioning An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled as they are removed from the normal flow. The rest of the document will behave like the Fixed Element does not exist.

Relative Positioning A relative positioned element is positioned relative to it’s normal position. The content of a Relative Element can be moved and overlap other elements, but the reserved space for the element is preserved in the normal page flow. These are often used as containers for absolutely positioned elements.

Absolute Positioning An absolute positioned 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. Absolute Elements are removed from the normal flow and the document will behave like the Absolutely Positioned Element does not exist. Absolute Elements can also overlap other elements. When elements are positioned outside of the normal flow (Fixed and Absolute), they can overlap other elements. The z-index property specifies the stack order of an element (which element should be in front or behind others). An element can have a positive or negative order and elements with the greatest number will appear in front of elements with lower numbers. If two elements overlap and do not have a z-index specified, the element positioned last in the HTML code will be shown on top.

Float With the Float Property, an element can be pushed left or right, allowing other elements to wrap around it on the open side. Float is often used on images for word wrap, but it is also very helpful for layouts. Elements float horizontally only and the floated element will move as far right or left as it can (to the very edge of the containing element). Elements that follow it in the html code will flow around it and elements before it in the code will not be affected. You can turn float off when needed by setting the float property to float:none;. You can prevent elements below the floated element from wrapping around by using the Clear Property. Clear can be set to left, right or both. I often have a class selector called clear that I can reused when needed to prevent items from wrapping. It usually looks like this:.clear{clear:both;}. And I often use it on the page like such:.

Aligning Block Elements As I have mentioned, elements that have a default display setting of block will by default occupy the entirety of the available width. However, if you set a block element’s width to something less than 100%, you will notice that it will often left align by default. If you’d like to center align the block element, you can utilize the Margin Property to make this happen. By setting the margin-left and margin-right properties to “auto”, you will center the block element within it’s parent container. Left and Right align the block element by using the Float Property. Float left or right will do the job, but you must have the element’s width set as smaller than 100% of the container element. I suggest setting the margin and padding properties to “0” in the body tag selector in your stylesheet as this will prevent crossbrowser compatibility issues.