How to create html page layout using DIVs

I've spend so many hours trying to figure out how to create html layout in the following format with no luck. Can someone guide me in the right direction? Thanks

-----------------------------------------------------------------

|       headerDiv1                                                                 |     hDiv2             |

-----------------------------------------------------------------

|       contentDiv1                                                                 |     cDiv2             |

|                                                                                           |                           |

|                                                                                           |                           |

--------------------------------------------------------------

|      footerDiv1                                                                    |     fDiv2             |

--------------------------------------------------------------

Answers


Start by using a grid system, like http://twitter.github.io/bootstrap/scaffolding.html#gridSystem or many other you around. It would be much easier to design a layout.


This can also be accomplished pretty easy in just HTML & CSS. YOu can see a working example here - Grid Layout.

Twitter Bootstrap is of course another good option, if you're willing to use an external library. It gives you some other really nice features (such as icons, etc).

If you're doing something basic, I'd probably just go with the CSS & not have to worry about the external library. It'd be worth learning Bootstrap if you have larger projects, or plan on doing things like this often in the future.

HTML

<div id="columns">
    <div class="col1">
        <div id="headerDiv1">
            <p>header div</p>
        </div>
        <div id="contentDiv1">
            <p>content div</p>
        </div>
        <div id="footerDiv1">
            <p>footer div</p>
        </div>
    </div>
    <div class="col2">
        <div id="hDiv2">
            <p>header div right side</p>
        </div>
        <div id="cDiv2">
            <p>content div right side</p>
        </div>
        <div id="fDiv2">
            <p>footer div right side</p>
        </div>
    </div>
</div>

CSS

#columns{
    display: table;
    width: 500px;
}

.col1{
    display: table-cell;
    width: 80%;
    padding: 1em;
    position: relative;
    left: auto;
}
.col2{
    width: 20%;
    display: table-cell;
    padding: 1em;
    position: relative;

}

Need Your Help

JUnit Tests for RabbitMQ

java spring junit spring-amqp spring-rabbit

I am building an application using RabbitMQ with Spring: so far so good.