Small Trick To Positioning DIVs
Posted: Sat Nov 30, 2013 8:52 am
Sometimes you may want to design a layout like the one below.
The trick to doing this is when you apply say position: absolute; to content.
You have to say it'll be positioned top: 60px; left: 115px; right: 0; bottom: 0;
NOTE: You don't specify width here! By positioning it at the specified coordinates similar to what I've added will align your div where you want it to be, with the width/height automatically filling in the area you want. If top is defined, but not bottom then height would have to be added otherwise it's default will be set to auto.
Here's a sample code:
You have to say it'll be positioned top: 60px; left: 115px; right: 0; bottom: 0;
NOTE: You don't specify width here! By positioning it at the specified coordinates similar to what I've added will align your div where you want it to be, with the width/height automatically filling in the area you want. If top is defined, but not bottom then height would have to be added otherwise it's default will be set to auto.
Here's a sample code:
Code: Select all
The app I used is called My Mobile Design. It's still early in development. You can head here to view any news related to development.<style type="text/css">
.head, .nav, .content { position: absolute; padding: 1em; color: #fff; text-shadow: #fff 0px 0px 8px; overflow: auto; }
.head {
top: 0px; left: 0px; right:0;
height: 29px;
background-color: rgb(0, 34, 150);}
.nav {
top: 60px; left: 0px; bottom:0;
width: 115px;
background-color: rgb(0, 34, 100);}
.content {
top: 60px; left: 115px; right:0; bottom:0;
background-color: rgb(0, 34, 60);}
</style>
<div class="head">Header</div>
<div class="nav">Navigation</div>
<div class="content">Content</div>