• http://www.techneurons.com/career/
  • experienced programming consultants for hire !!!

    Contact Now

    Web Designing Articles

    KB: Tableless layouts using floating DIV

    MONDAY, MARCH 29, 2010

    In the current web designing trend, the tableless web layouts are very popular and widely used. This article explains how to create tableless layouts using DIV elements. The technique very well substitutes the still commonly used layouts using tables and nested tables.

    Early web designs were very plain structured, and contents were mostly laid from top to bottom and as a single columned layouts. The TABLEs were initially used to represent data on the HTML pages, but later became a strong tool for making layouts for the web pages. Prior to the popularity of tables, the framesets were commonly used, it divided the pages into FRAMEs which are actually divisions within the browser window.

    The tableless designs are achieved using DIV, but actually using the effect of CSS style property float. Float is a powerful layout style, which determines where an element should be attached to. It has values left, right, none, inherit. Floating elements always try to stay attached to the preceding element, if they have the same float value. The first floating DIV with float:left will find its seat next in the first place as usual in its parent container. The succeeding floating DIV with float:left will find it's place to the right-side of the preceding floating element. The float:left elements stay floating on the left side of the container, as a chain in the actual order of the elements.

    The float:right elements stay attached to the right corner of the parent element, and it'll keep it's visible order as opposite of the actual order of the elements. The first float:right element stays right-most, and the next one stays left adjacent to the right-most one. While making the floating DIV design with float:right elements, the order of the elements should be added in right to left order.

    A simple HTML source code for floating DIV:

            <style type="text/css">
                .container
                {
                }
                .container DIV
                {
                    width: 15px;
                    border: 1px solid Blue;
                    margin: 1px;
                }
            </style>
            <div style="width: 200px;" class="container">
                <div style="float: left;">
                    1</div>
                <div style="float: left;">
                    2</div>
                <div style="float: left;">
                    3</div>
                <div style="float: left;">
                    4</div>
                <div style="float: right;">
                    5</div>
                <div style="float: right;">
                    6</div>
                <div style="float: right;">
                    7</div>
                <div style="float: right;">
                    8</div>
            </div>

    The first four elements are having float:left and the rest four are float:right. This produces a visual effect as you see here:

    1
    2
    3
    4
    5
    6
    7
    8

     If the width of the parent is lesser, the last elements, either having float:right or float:left finds its position in the second line. 

    1
    2
    3
    4
    5
    6
    7
    8

     DIVs with contents 1, 2, 3, 4 and 5 have space on the first line, so 6, 7, and 8 are moved to the next line. As they are having float:right, they are aligned to the right side of the container.

     Now we introduce more cells into the same set of floating DIVs - Cells 9 - 12 with float:left and 13 - 16 with float:right

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    This has given a weird appearence as, as the cell 9 has found it's place after the last element with ffloat:left, i.e., cell no. 4. To introduce a line break after the cell no. 8, we use a different CSS style clear. The CSS style clear takes values both, left, right, none, inherit. An element with style clear disallows floating element on left or right or both sides of it. A DIV element with clear:both disallows floating element on it's either side, hence placing it among the floating DIVs created a line-break, or a new row insertion. 

    1
    2
    3
    4
    5
    6
    7
    8
     
    9
    10
    11
    12
    13
    14
    15
    16

    The line-breaker element's height can be made as 1px or 0px hide its view in the design.

    The source view for the above example is as follows:

            <div style="width: 200px;" class="container1234">
                <div style="float: left;">
                    1</div>
                <div style="float: left;">
                    2</div>
                <div style="float: left;">
                    3</div>
                <div style="float: left;">
                    4</div>
                <div style="float: right;">
                    5</div>
                <div style="float: right;">
                    6</div>
                <div style="float: right;">
                    7</div>
                <div style="float: right;">
                    8</div>
                <div style="clear:both"></div>
                <div style="float: left;">
                    9</div>
                <div style="float: left;">
                    10</div>
                <div style="float: left;">
                    11</div>
                <div style="float: left;">
                    12</div>
                <div style="float: right;">
                    13</div>
                <div style="float: right;">
                    14</div>
                <div style="float: right;">
                    15</div>
                <div style="float: right;">
                    16</div>
            </div>

     Here's a practical layout example for floating DIV layout, but in a smaller scale.

            <div style="width: 200px;">
                <div style="float: left; width: 30px; height: 200px;background-color:Yellow;">
                    Cell 1
                </div>
                <div style="float: left; width: 110px; height: 60px;background-color:Blue;">
                    Cell 2
                </div>
                <div style="float:right;width:60px;height:200px;background-color:Red;">
                    Cell 3
                </div>
                <div style="float: left; width: 110px; height: 140px;background-color:Green;">
                    Cell 4
                </div>
            </div>

    The above HTML will be rendered like this on the browser like this: 

    Cell 1
    Cell 2
    Cell 3
    Cell 4


    Related Article:
    Displaying Products in MultiColumn grids using floating DIVs, ASP.NET ListView

    ConsultSarath - We provide end to end outsourcing solutions for .net programming requirements- you can hire programmer for hourly rates, for monthly commitments, for short term projects, for long term projects, Contact to know our hourly rates for programmer in India. ConsultSarath - We provide end to end outsourcing solutions for php programming requirements- you can hire programmer for hourly rates, for monthly commitments, for short term projects, for long term projects, Contact to know our hourly rates for programmer in India. ConsultSarath - We provide end to end outsourcing solutions for python programming requirements- you can hire programmer for hourly rates, for monthly commitments, for short term projects, for long term projects, Contact to know our hourly rates for programmer in India.

    Other Popular Articles
    We are experts in Cloud Computing Technologies. We can assist you to build high scalable business applications using Amazon Web Services (Amazon EC2, Amazon S3, Amazon SES, SNS, CloudFront), Windows Azure Platforms - Windows Azure and SQL Server Azure, Google App Engine using Python and Django Framework. We are Expert Programming Consultants available at affordable rates per hour. We work on several technologies - .NET, Python, Google App Engine, PHP, Windows Azure, Amazon Web Services ...