Using Float to arrange my web page columns

So, like I said in my previous post, I am going to use divs and the float ability to arrange my columns which will be the back bone of my web page.

This has been very tricky for me to learn, I am not good at this (really not good) so it has taken me quite a while to read and understand the actual functions of some of these functions. From what I gather, I need to apply the float:left; mechanic to all my boxes within a ‘container’ div to allow them to function correctly.

I have been using this guide HERE, to show me what I am exactly doing, copying what they say and replicating it on my Dreamweaver document. However once I have got their tutorial piece of code to work, I am tweaking it to my own advantage.

Obviously, once they are aligned how I want them to be, I need to look at adding a margin or some padding, so the content of each div doesn’t clash with the content from its neighbor.  I have gone with two columns on the main page,  a header and a footer. So I have given my menu bar a margin right of 25px which will give me some clearance between the content and the menu.

The footer I have given a top margin so I have some clearance above, and the header some bottom margin for the same reason. It is really starting to take shape. I am very please with the ‘layout’.

Now the next step for me is to add some color, and start identifying the columns with some great color options and some different styles.  I haven’t picked a font or anything like that yet but once Im done with getting the layout sorted as in where everything is going I will return to pick my font at a later time. Im still unsure as to what I want to use!

Guys, remember if you are new to all this like me, then why don’t you check out some of the sites I have used to help you along the way. There are plenty of free resources which will give you a great helping hand!

Leave a comment