I am using the code from http://www.imaputz.com/cssStuff/bigFourVersion.html . How do i put another big

Question

0

Asked: May 31, 20262026-05-31T00:40:50+00:00 2026-05-31T00:40:50+00:00

I am using the code from http://www.imaputz.com/cssStuff/bigFourVersion.html . How do i put another big

0

I am using the code from http://www.imaputz.com/cssStuff/bigFourVersion.html . How do i put another big table, 1 column, one row to the right?

This is the code I have done following below suggestions but it puts the second table below the top, scrolling table. If the second table could be next to the first scrolling table then I have success.

 div.tableContainer {
clear: both;
border: 1px solid #963;
height: 800px;
overflow: auto;
float:left;
width: 11132px
    }

 div.tableTwo {
clear: both;
border: 1px solid #963;
height: 800px;
float:left;
overflow: auto;
width: 500px
    }

<body>
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width: 11132px class="scrollTable">
 <thead class="fixedHeader">
  <tr class="alternateRow">
    <th width="462" valign="top"><div align="center">
        <p>Features</p>
        <p>&nbsp;</p>
      </div>

 <div id="tableContainer" class="tableTwo">
 <p>sdvfds</p>
 <p>sfsf</p>
 <p>sf</p>
 <p>sdf</p>
 <p>sdf</p>
 <p>sdf</p>
 <p>&nbsp;</p>
 </div>

after adding suggestion below the new table shows up on the right of the existing table in dreamweaver but browsers still show it below the existing table

 <div class="rightcol">
 <div id="tableTwo" class="tableTwo">
 <table border="0" cellpadding="0" cellspacing="0" width: 1000px">
 <tr width="462" align="left" valign="top">
 <div align="center">
 <p>point 1</p>
 <p>point 2</p>
 <p>point 3</p>
 <p>point 4</p>
 <p>point 5</p>
 <p>point 6</p>
 </div>

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-31T00:40:52+00:00

You sound like you want to use a 2 column layout

in your css

.leftcol {
    float:left;
    width:50%;
}
.rightcol {
    float:left;
    width:50%;
}

in your html

<div class="leftcol">
    ... table one in here
</div>

<div class="rightcol">
    ... table two in here
</div>

Edit the widths in the css to however large you want.

Your document would look something like

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .leftcol {
            float: left;
            width: 50%;
        }
        .rightcol {
            float: left;
            width: 50%;
        }        
    </style>
    <title>Columns</title>
</head>
<body>
    <div class="leftcol">
        put your left table in here
    </div>
    <div class="rightcol">
        put your right table in here
    </div>
</body>
</html>

Here is a full example of putting 2 example tables side by side on the page. You could try customising this if you are having difficulty. For a working example see http://jsfiddle.net/R3MBQ/ just make sure you stretch the result pane wide enough to see both of the tables. They may need shrinking to fit on the page side by side.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .leftcol {
            float: left;
            width: 50%;
        }
        .rightcol {
            float: left;
            width: 50%;
        }
        /* define height and width of scrollable area. Add 16px to width for scrollbar          */
        div.tableContainer {
            clear: both;
            border: 1px solid #963;
            height: 285px;
            overflow: auto;
            width: 756px
        }

        /* Reset overflow value to hidden for all non-IE browsers. */
        html>body div.tableContainer {
            overflow: hidden;
            width: 756px
        }

        /* define width of table. IE browsers only                 */
        div.tableContainer table {
            float: left;
            width: 740px
        }

        /* define width of table. Add 16px to width for scrollbar.           */
        /* All other non-IE browsers.                                        */
        html>body div.tableContainer table {
            width: 756px
        }

        /* set table header to a fixed position. WinIE 6.x only                                       */
        /* In WinIE 6.x, any element with a position property set to relative and is a child of       */
        /* an element that has an overflow property set, the relative value translates into fixed.    */
        /* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
        thead.fixedHeader tr {
            position: relative
        }

        /* set THEAD element to have block level attributes. All other non-IE browsers            */
        /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
        html>body thead.fixedHeader tr {
            display: block
        }

        /* make the TH elements pretty */
        thead.fixedHeader th {
            background: #C96;
            border-left: 1px solid #EB8;
            border-right: 1px solid #B74;
            border-top: 1px solid #EB8;
            font-weight: normal;
            padding: 4px 3px;
            text-align: left
        }

        /* make the A elements pretty. makes for nice clickable headers                */
        thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
            color: #FFF;
            display: block;
            text-decoration: none;
            width: 100%
        }

        /* make the A elements pretty. makes for nice clickable headers                */
        /* WARNING: swapping the background on hover may cause problems in WinIE 6.x   */
        thead.fixedHeader a:hover {
            color: #FFF;
            display: block;
            text-decoration: underline;
            width: 100%
        }

        /* define the table content to be scrollable                                              */
        /* set TBODY element to have block level attributes. All other non-IE browsers            */
        /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
        /* induced side effect is that child TDs no longer accept width: auto                     */
        html>body tbody.scrollContent {
            display: block;
            height: 262px;
            overflow: auto;
            width: 100%
        }

        /* make TD elements pretty. Provide alternating classes for striping the table */
        /* http://www.alistapart.com/articles/zebratables/                             */
        tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
            background: #FFF;
            border-bottom: none;
            border-left: none;
            border-right: 1px solid #CCC;
            border-top: 1px solid #DDD;
            padding: 2px 3px 3px 4px
        }

        tbody.scrollContent tr.alternateRow td {
            background: #EEE;
            border-bottom: none;
            border-left: none;
            border-right: 1px solid #CCC;
            border-top: 1px solid #DDD;
            padding: 2px 3px 3px 4px
        }

        /* define width of TH elements: 1st, 2nd, and 3rd respectively.          */
        /* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
        /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
        html>body thead.fixedHeader th {
            width: 200px
        }

        html>body thead.fixedHeader th + th {
            width: 240px
        }

        html>body thead.fixedHeader th + th + th {
            width: 316px
        }

        /* define width of TD elements: 1st, 2nd, and 3rd respectively.          */
        /* All other non-IE browsers.                                            */
        /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
        html>body tbody.scrollContent td {
            width: 200px
        }

        html>body tbody.scrollContent td + td {
            width: 240px
        }

        html>body tbody.scrollContent td + td + td {
            width: 300px
        }
        -->        
    </style>
    <script type="text/javascript">
        <!--
        /* http://www.alistapart.com/articles/zebratables/ */
        function removeClassName (elem, className) {
            elem.className = elem.className.replace(className, "").trim();
        }

        function addCSSClass (elem, className) {
            removeClassName (elem, className);
            elem.className = (elem.className + " " + className).trim();
        }

        String.prototype.trim = function() {
            return this.replace( /^\s+|\s+$/, "" );
        }

        function stripedTable() {
            if (document.getElementById && document.getElementsByTagName) {  
                var allTables = document.getElementsByTagName('table');
                if (!allTables) { return; }

                for (var i = 0; i < allTables.length; i++) {
                    if (allTables[i].className.match(/[\w\s ]*scrollTable[\w\s ]*/)) {
                        var trs = allTables[i].getElementsByTagName("tr");
                        for (var j = 0; j < trs.length; j++) {
                            removeClassName(trs[j], 'alternateRow');
                            addCSSClass(trs[j], 'normalRow');
                        }
                        for (var k = 0; k < trs.length; k += 2) {
                            removeClassName(trs[k], 'normalRow');
                            addCSSClass(trs[k], 'alternateRow');
                        }
                    }
                }
            }
        }

        window.onload = function() { stripedTable(); }
        -->
    </script>

    <title>Columns</title>
</head>
<body>
    <div class="leftcol">
        <div id="tableContainer" class="tableContainer">
        <table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
        <thead class="fixedHeader">
            <tr>
                <th><a href="#">Header 1</a></th>
                <th><a href="#">Header 2</a></th>
                <th><a href="#">Header 3</a></th>
            </tr>
        </thead>
        <tbody class="scrollContent">
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>End of Cell Content 1</td>
                <td>End of Cell Content 2</td>
                <td>End of Cell Content 3</td>
            </tr>
        </tbody>
        </table>
        </div>
    </div>
    <div class="rightcol">
        <div id="tableContainer" class="tableContainer">
        <table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
        <thead class="fixedHeader">
            <tr>
                <th><a href="#">Header 1</a></th>
                <th><a href="#">Header 2</a></th>
                <th><a href="#">Header 3</a></th>
            </tr>
        </thead>
        <tbody class="scrollContent">
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>End of Cell Content 1</td>
                <td>End of Cell Content 2</td>
                <td>End of Cell Content 3</td>
            </tr>
        </tbody>
        </table>
        </div>
    </div>
</body>
</html>

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I am using the code from http://www.imaputz.com/cssStuff/bigFourVersion.html . How do i put another big

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply