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:
• <div>
• <p>
• <h1> & <h2> & <h3> & <h4>
• <ul> & <ol> & <li>
• <header>
• <footer>
• <section>
• <aside>
• <article>
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:
• <a>
• <span>
• <em>
• <strong>
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 <html>. 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: <div
class=“clear”></div>.
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.
