Float allows us to create multi-column layouts.
We can create a two column layout by floating one container to the left and one to the right.
.main-content { float:left; width:66.67%; }
.sidebar { float:right; width:33.33%; }
We can create 2 or more column layouts by floating a series of elements in the same direction.
When floating elements, the surrounding content tries to wrap around whatever has been floated which can lead to some weird side-effects.
The effect of float can be cleared by using the clear property.
An example of this would be clearing a footer beneath two floated columns.
When a container contains only floated children, the container doesn't know how high it needs to be to contain all those elements. If we try and add a border or background colour to such a container, things will look broken.
To fix this problem of container collapse, we use clearfix.
.clearfix:before,
.clearfix:after {
content: " ";
display:table;
}
.clearfix:after {
clear:both;
}
This snippet of CSS gives us a utility class that we can add to any element that we want to prevent collapse on.
<div class="container clearfix"></div>
For more reading on the subject, check out this article on CSS Tricks or this video of mine on AtoZ CSS.
Setting display:inline-block is an alternative to creating multiple
column layouts and doesn't require any use of clear or clearfix
techniques. Inline-block also allows us to do vertical alignment and
center blocks of content too which is pretty handy.
Inline-block elements display in a line but can also have box-model
properties such as width, height and vertical margin and padding
set which is really useful especially when styling navigation, buttons
and form inputs.
The downside of inline-block is that space characters in the HTML show
up as space between elements; even if margin is set to 0.
This can be worked around by setting font-size:0 on the parent element
and then re-setting the font-size of the child elements back to an
absolute value.
Take the example of a list of nav items:
<nav class="site-nav">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">projects</a></li>
<li><a href="#">contact us</a></li>
</ul>
</nav>
The following CSS will make the list items inline-block and remove the space between them:
.site-nav ul {
font-size:0;
}
.site-nav li {
display:inline-block;
font-size:16px;
}
CSS positioning allows us to create detailed and complex layouts by
placing elements with a lot more precision than using float.
We looked at the example of the Yeo Valley website where many of the details are positioned; the pin graphics, the logo, the instagram polaroid photos and all the hand-drawn arrows.
The position property takes four possible values:
- static
- relative
- absolute
- fixed
When positinoning elements, a further handful of properties become available in most cases:
- top
- right
- bottom
- left
- z-index
Static position is the same as normal flow.
Relative position is used to tweak the position of an element and maintain its original space in the document. It is also used to create a parent container (think relative) in which to absolutely position child elements. Relative positioned elements appear on a new layer.
Absolute position removes elements from the document flow and puts them
on a new layer. They can then be placed by setting top, right,
bottom and left offsets.
Fixed positioned elements are placed relative to the viewport and don't move even when the page is scrolled.
Elements with relative, absolute or fixed position are rendered on
a "new layer" and the stacking order of these layers can be controlled
with z-index.
For more info on CSS position, check out the following video on CSS tricks all about position or my video about z-index on AtoZ CSS