Grid Layout Using div?

**tomalex0** · Feb 3, 2011 05:40

Hi,

I have been looking for an alternative for tbody thead to create a grid layout using div. Below code worked fine.

CSS

Code:

 div#layout {display: table;}
        div#layout {display: table;}
        div.hgroupheader {display: table-row;background:gray;}
        div.hgroup {display: table-row;}
        div.cell {display: table-cell;border:solid 1px red;}

HTML Code:

<div id="layout">
        <div class="hgroupheader">
         <div class="cell">Site Name</div>
         <div class="cell">Site Url</div>
         <div class="cell">Status</div>
        </div>
        <div class="hgroup">
         <div class="cell">Google</div>
         <div class="cell">google.com</div>
         <div class="cell">Cool</div>
        </div>
        <div class="hgroup">
         <div class="cell">Sitepoint</div>
         <div class="cell">sitepoint.com</div>
         <div class="cell">Awesome</div>
        </div>
        <div class="hgroup">
         <div class="cell">yahoo</div>
         <div class="cell">yahoo.com</div>
         <div class="cell">Cool</div>
        </div>
    </div>

I was looking to provide a scroll bar for section other than hgroupheader

I tried to enclose whole hgroup inside a div but it was confined to single column .

What change should i make to get the functionality i was looking for ?

Or is there any alternative for this ?

Hope someone could help me with this.

Thanks in Advance

**TommiChi** · Feb 3, 2011 06:37

You were on the right track with the containing div, but you were probably missing some styling. You can set the overflow of your container to either "scroll" (there is always ascrollbar) or "auto" (the scrollbar appears when the content overflows). I have pasted below the markup of the test page I created:
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">

<style type="text/css">
div#layout { overflow: table; }
div.hgroupheader { display: table-row;background:gray; }
div.hgroup { display: table-row; }
div.cell { display: table-cell;border:solid 1px red; }
div.scrollable { float:left; width:auto; overflow:auto; height:100px; padding-right:20px; }
</style>
</head>
<body>
<div id="layout">
<div class="hgroupheader">
<div class="cell">Site Name</div>
<div class="cell">Site Url</div>
<div class="cell">Status</div>
</div>
<div class="scrollable">
<div class="hgroup">
<div class="cell">Google</div>
<div class="cell">google.com</div>
<div class="cell">Cool</div>
</div>
<div class="hgroup">
<div class="cell">Sitepoint</div>
<div class="cell">sitepoint.com</div>
<div class="cell">Awesome</div>
</div>
<div class="hgroup">
<div class="cell">yahoo</div>
<div class="cell">yahoo.com</div>
<div class="cell">Cool</div>
</div>
<div class="hgroup">
<div class="cell">yahoo</div>
<div class="cell">yahoo.com</div>
<div class="cell">Cool</div>
</div>
<div class="hgroup">
<div class="cell">yahoo</div>
<div class="cell">yahoo.com</div>
<div class="cell">Cool</div>
</div>
<div class="hgroup">
<div class="cell">yahoo</div>
<div class="cell">yahoo.com</div>
<div class="cell">Cool</div>
</div>
<div class="hgroup">
<div class="cell">yahoo</div>
<div class="cell">yahoo.com</div>
<div class="cell">Cool</div>
</div>
<div class="hgroup">
<div class="cell">yahoo</div>
<div class="cell">yahoo.com</div>
<div class="cell">Cool</div>
</div>
<div class="hgroup">
<div class="cell">yahoo</div>
<div class="cell">yahoo.com</div>
<div class="cell">Cool</div>
</div>
</div>
</div>
</body>
</html>

**tomalex0** · Feb 3, 2011 07:36

Thanks for the help, that was what i'm looking

one more thing i need to know is there any way if we could adjust grid header based on the cell width.

If we look in to the current implementation grid header cells are not alligned with its child row cells.

**rguy84** · Feb 3, 2011 07:40

Can I ask why you are not just styling a table? The accessibility and usuability of this is low.

**TommiChi** · Feb 3, 2011 07:52

rguy84 does make a good point. In this case, it is more semantically correct to use table tags, as you are effectively trying to display tabular data. Also, as far as I know IE 6 and 7 do not support very well these CSS table properties.

**tomalex0** · Feb 3, 2011 07:57

I was actually trying to create Grid Plugin which runs in Sench Touch,
for this i would like to get the HTML fixed so that i could dynamically create rows based on the values that i have.

If you look in to the screen shot, you could see header and body, the problem i was facing is i couldn''t scroll the body part alone by keeping the header static.

So basically im looking for a grid layout were header is fixed and body part is scrollable.

**tomalex0** · Feb 3, 2011 07:58

Main thing i have missed is, im looking for layout which works in webkit

**rguy84** · Feb 3, 2011 08:09

Did you try something like

Code css:

tbody { scroll: Auto; }

**tomalex0** · Feb 3, 2011 08:27

I tried this and also assigned some height but not got worked

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >
<html lang="en">
<head>
    <title><!-- Insert your title here --></title>
    
</head>
<body>
    <html>
    <head>
        <meta name="generator" content="HTML Tidy for Linux/x86 (vers 11 August 2008), see www.w3.org">

        <title></title>
        <style type="text/css">
        tbody { scroll: auto; }
        </style>
    </head>

    <body>
        <table>
            <colgroup>
                <col style="background-color:red;">
                <col style="background-color:blue;">
                <col>
                <col>
                <col>
            </colgroup>

            <thead>
                <tr >
                    <th >
                        <div >
                            <div >
                                <span >id</span>
                            </div>

                            <div ></div>
                        </div>
                    </th>

                    <th>
                        <div >
                            <div >
                                <span >date</span>
                            </div>

                            <div></div>
                        </div>
                    </th>

                    <th >
                        <div >
                            <div >
                                <span >quantity</span>
                            </div>

                            <div ></div>
                        </div>
                    </th>

                    <th >
                        <div>
                            <div>
                                <span >amount</span>
                            </div>

                            <div></div>
                        </div>
                    </th>

                    <th  rowspan="1" colspan="1">
                        <div>
                            <div >
                                <span >title</span>
                            </div>

                            <div></div>
                        </div>
                    </th>
                </tr>
            </thead>

            <caption>
                DataTable Caption
            </caption>

            <tbody tabindex="0" >
                <tr >
                    <td >
                        <div class="yui-dt-liner">
                            po-0167
                        </div>
                    </td>

                    <td >
                        <div class="yui-dt-liner">
                            03/24/1980
                        </div>
                    </td>

                    <td >
                        <div class="yui-dt-liner">
                            1
                        </div>
                    </td>

                    <td >
                        <div >
                            $4.00
                        </div>
                    </td>

                    <td >
                        <div>
                            A Book About Nothing
                        </div>
                    </td>
                </tr>
                <tr >
                    <td >
                        <div class="yui-dt-liner">
                            po-0167
                        </div>
                    </td>

                    <td >
                        <div class="yui-dt-liner">
                            03/24/1980
                        </div>
                    </td>

                    <td >
                        <div class="yui-dt-liner">
                            1
                        </div>
                    </td>

                    <td >
                        <div >
                            $4.00
                        </div>
                    </td>

                    <td >
                        <div>
                            A Book About Nothing
                        </div>
                    </td>
                </tr>
                <tr >
                    <td >
                        <div class="yui-dt-liner">
                            po-0167
                        </div>
                    </td>

                    <td >
                        <div class="yui-dt-liner">
                            03/24/1980
                        </div>
                    </td>

                    <td >
                        <div class="yui-dt-liner">
                            1
                        </div>
                    </td>

                    <td >
                        <div >
                            $4.00
                        </div>
                    </td>

                    <td >
                        <div>
                            A Book About Nothing
                        </div>
                    </td>
                </tr>
                <tr >
                    <td >
                        <div class="yui-dt-liner">
                            po-0167
                        </div>
                    </td>

                    <td >
                        <div class="yui-dt-liner">
                            03/24/1980
                        </div>
                    </td>

                    <td >
                        <div class="yui-dt-liner">
                            1
                        </div>
                    </td>

                    <td >
                        <div >
                            $4.00
                        </div>
                    </td>

                    <td >
                        <div>
                            A Book About Nothing
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>

</body>
</html>

**clairs** · Feb 3, 2011 13:14

Why on earth have you put divs inside a td?

**tomalex0** · Feb 3, 2011 20:55

Its just a model that i have which used thead and tbody to create a grid. This structure i copied from somewhere.
.

**rguy84** · Feb 4, 2011 14:04

yui-dt-liner tells me you got this from the YUI toolkit. That table looks ugly

**tomalex0** · Feb 4, 2011 20:45

You are correct ,i just got it from there, but i'm open to any which meet what i was looking for.

i have specified some height to tbody it doesn't make any change.

Do you have any suggestion?

**clairs** · Feb 5, 2011 16:42

For scrolling you need overflow: auto

User Tag List

Thread: Grid Layout Using div?

Thread Tools

Display

Grid Layout Using div?

Bookmarks

Bookmarks

Posting Permissions