Layout question

[Tomas Petricek]

Hi, is it possible to create web page layout like this:

______________________
| | |
| 100px | Width-100px |
|<----->|<------------>|
| | |
| | |
|_______|______________|

using DIVs and styles ? I know how to divide page to two parts using width in percents but how to do this with pixels ? Thanks!:) i'm only pointer to myself

[Paul Watson]

Do you mean 100% in the second block, not 100px?

Paul Watson
Bluegrass
Cape Town, South Africa

Crikey! ain't life grand?

[Tomas Petricek]

I mean something like this (but without table):

<table width="100%">
<tr>
<td width="100px"> Left... </td>
<td> Right... </td>
</tr>
</table>

i'm only pointer to myself

[ZoogieZork]

<style type="text/css"><!--
body {
margin: 0 0 0 0;
}
div.nav {
position: absolute;
width: 100px;
background-color: #dfdfdf;
height: 100%;
}
div.content {
position: relative;
left: 100px;
right: 0;
background-color: #7f7f7f;
height: 100%;
}
--></style>

<div class="nav">
Asparagus
</div>

<div class="content">
Content
</div>

- Mike

[Paul Watson]

Ok, so a fixed width left column and the a variable width content column. Sure, use this:

<div id="navigation">
<ul>
<li><a title="Page link" href="">Page 1</a></li>
<li><a title="Page link" href="">Page 2</a></li>
<li><a title="Page link" href="">Page 3</a></li>
<li><a title="Page link" href="">Page 4</a></li>
<li><a title="Page link" href="">Page 5</a></li>
<li><a title="Page link" href="">Page 6</a></li>
</ul>
</div>
<div id="content">
<h1>Page Title</h1>
<p>Content content content content content content content content content content content content content content content content content.</p>
<p>Content content content content content content content content content content content content content content content content content.</p>
<p>Content content content content content content content content content content content content content content content content content.</p>
<p>Content content content content content content content content content content content content content content content content content.</p>
</div>

and then CSS:

div#navigation
{
width: 100px;
float: left;
border: solid 1px #000000;
height: 100%;
}

div#content
{
padding-left: 120px;
border: solid 1px #000000;
}

So the idea is to have a DIV on the left with float:left set and a fixed width. Then the DIV on the right expands to fill the space. The padding-left: 120px; keeps it off the left DIV.

Paul Watson
Bluegrass
Cape Town, South Africa

Crikey! ain't life grand?

[Tomas Petricek]

Thank you ! :) i'm only pointer to myself

[Paul Watson]

That is a pretty cool way of doing it as well Mike. I really need to remember absolute positioning more.

Paul Watson
Bluegrass
Cape Town, South Africa

Crikey! ain't life grand?