Home
3DS MAX
Alias Maya
HTML & CSS
Photoshop
Forum
Contact Us
Positioning: Everything float! E-mail
Written by Dzordz   
Monday, 22 May 2006
I really do not understand why anybody would skip using floating with CSS, it is a little abstract for some but when you get the hang of it, it's really easy. So here is a little help on floating. Learning by example is best so we will today disect a small example specialy made for this occasion. Positioning itself helps with search enginge optimisation. How you ask surely, by good positioning you can leave content near the top of the source page where it has more impact on SEO than on the bottom of the page and still have the same visual effect for the viewer.
We will use the next example of a small page.

<html>
    <head>
        <title>Everything float!</title>
        
        <style type="text/css">
        
        body
        {
            padding: 0;
            margin: 0;
        }
        
        div#header
        {
            float: left;
            width: 100%;
            background-color: blue;
        }
        
        div#leftcolumn
        {
            width: 40%;
            float: left;
            background-color: magenta;
        }
        
        div#rightcolumn
        {
            width: 40%;
            float: right;
            background-color: green;
            
        }

        </style>

    </head>
    <body>
    
    <div id="header"> <h1>Everything float!!!</h1> </div>
    <div id="leftcolumn"> This is the crazy left column </div>
    <div id="rightcolumn"> This is the wicked right column </div>


    Space in between!
    </body>
</html>




When inside a page (not really good practice as I mentioned SEO) CSS is put into the <style> tags.
What we have here is a header and two columns web page something you see everyday on the net. I have left some space between them for demonstration and put some text there.
For those who do not know <body> tag in HTML is not 100% across the browser and that is why we had to "null" it.
Why is float so good? Coding a site for more resolutions is easiest with float and percentages as you see here the header is on its own 100% full width of the page so there is not a lot to talk about there.
What is interesting are the the two columns and space in the middle. Both columns are set to 40% just to leave enough space for some text (or another <div> if needed). What happens when we float is that browser just pushes the <div> top and left (or right) as much as it can and leaves it there. Whit there columns posted left and right (think menu and link list) we can put content in between. Ok the proportions are not right but this is only a demonstration :)
One thing a lot of people skip to check when builuding pages is how their site behaves when browser is scaled, try making it really narrow and you will see how the text in the middle slowly switches under the left column, that is what floating is all about, while there is space it will try and put more but once space runs out it just continues in the next row. Another demonstration of this can be seen if you add "min-width: 300px;" to the rightcolumn <div> and again make it narrow and see how this time first the text than the right collumn go under the left.

Guess this is it, just a short one this time but many more to come. :)

Take care and happy coding!
 
Next >
[ Back ]