This is the first example in my series for CSS tableless design Basics. I will eventually expose an ASP.NET project later on once I start building more tutorials for free access in which you can see all these examples and more later on for download. And I think the dryer the post is about CSS or a book is, the harder it is to understand so I’m going to try to talk as though I’m teaching someone, not just spitting out technical terms here.
First off, I’m a huge advocate for tableless design especially when coding views in ASP.NET MVC. Even if not using MVC you should really start to get a grasp of it now, and quite frankly people we’re in 2009, there’s is no excuse for it and the web expects it. Your designer expects you to be able to accommodate his creative. And your team expects to be able to maintain good quality mark-up. At first it seems daunting and scary to make the leap but I can tell you first hand once you start to get it, it gets so much more easy and you realize the power and flexibility that you could never get with tables. In fact my design time is cut in half now after spending a good month in tableless design. At first it was a bit daunting and frustrating but that only lasts a couple months. And you won’t believe how your page is simplified and footprint is reduced when you’re not using tables! It’s so much easier to read people!
So now to the topic today. We’re talking about how can I position things when I’m not using tables? Well, there are 2 major ways to position elements in CSS to sort of do what you were doing with tables. Just pick your passion. I personally like using floats. It’s just easier for me to use floats, and until I find trouble with them that’s what I am sticking with even for complex sites. And by the way, personally after all the infighting I see in books and on the net about whether to use positioning vs. floats, I have not found any trouble yet even for a complicated website by using floats. I am starting to really get quite comfortable with it after moving away from tabled design this year.
Bottom Line: In simple terms, what float simply does is put whatever element you’re floating next to the element that is before it. At least that’s how I want to state it.
Float Left
Lets say I want 3 buckets (could be more could be less, doesn’t matter) of content (divs) and I want all 3 to show up next to each other horizontally.
In this case we’d have to float the last 2 elements (last 2 divs) with a value of float:left
We’re using <div> because it’s a container element that is meant to group content. And we’re then going to simply move the content (in each <div> container) around by using floats.
The Code
<div id="FirstElement">
FirstElement Content
</div>
div id="SecondElement">
SecondElement Content
</div>
div id="ThirdElement">
ThridElement Content
</div>
The CSS
#FirstElement
{
float: left;
border: 1px solid #3a486f;
width: 200px;
}
#SecondElement
{
float: left;
border: 1px solid #3a486f;
width: 200px;
}
#ThirdElement
{
float: left;
border: 1px solid #3a486f;
width: 200px;
}
The Result with Float:Left
The Result without floats (they show up just stacked naturally as they occur in page)
Now that I’ve floated element #2 to the let it will show up next to element #1. And because I floated element #3 to the left, it will show up next to element #2. Try taking the floats out. What happens? They all show up stacked underneath each other (vertically), why? Because that’s how they render naturally in the DOM. What you’re doing with float is saying hey, I want you to stack horizontally next to each other instead so lets use a float to do that :).
Now you’re asking why did I only have to float #2 and #3? It’s because #1 doesn’t need to float against anything. It is the starting point. You only float an element (in this case div) to an element before it. Well, #1 doesn’t have any elements before it, so no need to float it.
Float Right
Why would you ever have to float right? After all, you could just stack left to right and be all done right? Most of the time yes, but there are times you will want to float an element right instead of left.
Lets say the 3 buckets above were in one bigger container (div) called a wrapper. And I wanted the first two buckets to show aligned left to the wrapper’s left side. But here’s the kicker. I want the last element to be flush right to the right side of the wrapper’s right, not flush to the second element so that there is a gap between element 2 and element 3. I’d therefore need to float element 3 so that it hugs the wrapper’s right side.
The Code
<div id="Wrapper">
<div id="FirstElement">
FirstElement Content
</div>
<div id="SecondElement">
SecondElement Content
</div>
<div id="ThirdElement">
ThridElement Content
</div>
</div>
The CSS
#Wrapper
{
border: 1px solid #45a62a;
width: 700px;
height: 100px;
}
#FirstElement
{
float: left;
border: 1px solid #3a486f;
width: 200px;
}
#SecondElement
{
float: left;
border: 1px solid #3a486f;
width: 200px;
}
#ThirdElement
{
float: right;
border: 1px solid #3a486f;
width: 200px;
display: block;
}
The Result with Float:Right
Notice 2 things:
a) I added a float:left to what was element #1. Why? because now the main parent here is no longer element #1, it’s the wrapper so we must now float element #1 left of the its parent which would be the wrapper div.
b) I added float:right to the last element. This pushed it to the far right, flush with the wrapper’s right side.
I hope this lesson has helped you understand floats better.
