working on it ...

Filters

Explore Public Snippets

Sort by

Found 2 snippets matching: "div column"

    public by lbottaro  429400  12  7  3

    HTML header - footer layout using CSS and DIV

    This code renders a HTML basic layout with header, main and footer contents. The main content has 2 columns and the right one contains two rows. Source: http://stackoverflow.com/questions/6778808
    <html>
        <head>
        <style type="text/css">
        #maincontent {
            width:950px;
            height:100%;
            margin:0 auto;
        }
        #header {
            width:946px;
            height:150px;
            border:#000 solid;
            border-width:2px 2px 1px 2px;
        }
        #leftcolumn {
            width:395px;
            height:703px;
            border:#000 solid;
            border-width:1px 1px 1px 2px;
            float:left;
        }
        #toprow {
            width:549px;
            height:351px;
            border:#000 solid;
            border-width:1px 2px 1px 1px;
            float:left;
        }
        #bottomrow {
            width:549px;
            height:350px;
            border:#000 solid;
            border-width:1px 2px 1px 1px;
            float:left;
        }
        #footer {
            width:946px;
            height:150px;
            border:#000 solid;
            border-width:1px 2px 2px 2px;
            clear:both;
        }
        </style>
        <body>
        <div id="maincontent">
            <div id="header">Header Content</div>
            <div id="leftcolumn">Leftcolumn Content</div>
            <div id="toprow">Toprow Content</div>
            <div id="bottomrow">Bottomrow Content</div>
            <div id="footer">Footer Content</div>
        </div>
        </body>
        </html>

    external by pradipkumardesai  141  0  2  0

    CSS : div columns

    CSS : div columns: Index.html
    <body ng-app="indexModule" ng-controller="indexController">
        <button onclick="changeCol()">Change</button>
    
        <div id="testDiv" style="columns:200px 3;border:1px solid red;width:650px;">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
            <div>11</div>
            <div>12</div>
            <div>13</div>
            <div>14</div>
        </div>
        <script>
            function changeCol() {
                document.getElementById("testDiv").style.columnCount = 4;
            }
        </script>
    </body>
    
    

    List Complete ( 2 snippets total )

    Cannot find what you were looking for?
    Ask the Snip2Code Community

    • Public Snippets
    • Channels Snippets