Small Trick To Positioning DIVs

5 posts Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Small Trick To Positioning DIVs
mikethedj4
Sometimes you may want to design a layout like the one below.
layout.png
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:
Code: Select all
<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>
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.
You do not have the required permissions to view the files attached to this post.
Filip
Coding Guru
Coding Guru
Posts: 833
Joined: Wed Jan 05, 2011 3:59 pm

Re: Small Trick To Positioning DIVs
Filip
Wouldn't that kind of positioning mess up responsive effect?
CodenStuff wrote:
Nope, it's just your sick and dirty mind. You sick twisted warped little pervo :D
User avatar
comathi
Coding God
Coding God
Posts: 1242
Joined: Fri Mar 26, 2010 1:59 pm

Re: Small Trick To Positioning DIVs
comathi
In itself, yes. But by using CSS media queries to target screen size ranges, you can still get that responsive effect :)
User avatar
smashapps
Coding Guru
Coding Guru
Posts: 961
Joined: Tue Apr 05, 2011 8:41 am

This is pretty helpful thanks!

I must add though, holy hell your app has come a long way, looks very professional! O: You better start making money from that!
My name is Tom | Visit my blog where I post new content every day! Tom's Daily Blog | MineCraft is awesome!
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

You're welcome. Glad I could help!

I do plan on it, but they'll be a free and pro version of the app in which the free version is open source.
5 posts Page 1 of 1
Return to “Tutorials”