Breadcrumbs

[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.

[Filip]

Wouldn't that kind of positioning mess up responsive effect?

[comathi]

In itself, yes. But by using CSS media queries to target screen size ranges, you can still get that responsive effect

[smashapps]

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!

[mikethedj4]

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.