Let’s look at this thumbnail image here. When we select the alignment you see it is assigning a class called “align:left” to this which makes the image float to the left. And this is a good example of the way float works so let’s talk about that.
Review How HTML Works
But first, the way HTML generally works is that an HTML element will span from left to right as far as it possibly can, right? It’ll expand horizontally to fill its container and it will expand vertically to contain all of its contents. So that’s the automatic way in which an HTML element works.
A block level HTML element will automatically expand horizontally as far as it possibly can and stops at boundaries and then it extends vertically as far as necessary in order to contain it’s contents.
What Happens When You Add a Floating Element
As soon as you float an element, you break that pattern. As soon as you float the element, now the element is only as wide either as you tell it to be or only as wide as necessary in order for it to contain its contents.
So in this case, if a content is 150 pixels wide and if we don’t define a width for this, this div is only going to be 150 pixels wide and it will allow other elements to float up beside it. That’s why they call it floating because it takes this element out of the normal flow of HTML and it allows other things to flow around it.
Float an Element Left or Right
So if it’s floating to the left then the element sits off to the left and other things can jump up beside it. If it floats to the right then it hangs over here to the right and other things can bump up here beside it. There’s no need to define it as a column to create this, all that’s absolutely necessary in order to do this is simply to take an element and make it float.
Spacing the Elements
Now, because I wanted equally spaced areas in the example that I demonstrate here, I did actually give this a width of 33%. But that was only because of the way I wanted to equally space each of these. If I didn’t want to equally space each of them, I didn’t need to define a width, all I needed to do is say float and it would only be as wide as necessary in order to contain its contents.
How we’re using Floating Elements
So that’s what’s going to happen here. In order to make this work what we’re going to do is make this image float to the left and then allow this stuff to pop up beside it.
Now, the difference between this and this is that the headline area comes first and then the floated element comes second. This is first and then this is second so this can’t float beside it but this stuff can.
What we’re going to do here in this case then is take the thumbnail image and have it above Post Heading which should allow this Post Heading div to float immediately beside the image.
Arranging Elements in the Post Box Layout
Now while we’re at it, let’s just acknowledge that what we really want to do with this is take author out and date out and categories out. For the time being we’re just going to drop them in the tray.
When we start structuring the footer we’ll come back and put them back in. So we’ve got our Thumbnail Image, our Post Heading and our Excerpt and our Post Footer. Let’s save the template now and refresh it. You can see we have our image and our heading and our text.
Now, something that we also want to do with this is to take this Typical 2 Column Content and instead of two thirds – one third for the purposes of this, we’re going to say Two columns, three quarters – one quarter.
Then the Main Content Column is going to be three quarters width and the Main Sidebar Column is going to one quarter width. We’ll save the template and now we’re going closer to what he would like to accomplish here.
Next up we’re going to style the Post Title.