fixed and liquid column positioning

[ChitownE]

Here's what I'm looking to do: fixed left column and a right column
that fills the remainder of the space. I need the ability to position
other elements relative to the borders of the right column. Without
nesting containers, here's the best cross-browser version I could come
up with:

http://www.singley.org/test/two_cols2.html

I see what's wrong - the right column is getting offset by the left
column which pushes the viewport out 200px to the right. But I
couldn't figure out a way to get the widths to work and for my square
box to position relative to the edges of the right container.

I eventually settled on this, which works and uses nested DIVs:

http://www.singley.org/test/two_cols1.html

So, mostly for my own learning, I'd like to know how to implement this
layout without the nested DIV design.

Thanks,

~ E

[Els]

ChitownE wrote:

Here's what I'm looking to do: fixed left column and a right column
that fills the remainder of the space. I need the ability to position
other elements relative to the borders of the right column. Without
nesting containers, here's the best cross-browser version I could come
up with:

http://www.singley.org/test/two_cols2.html

I see what's wrong - the right column is getting offset by the left
column which pushes the viewport out 200px to the right. But I
couldn't figure out a way to get the widths to work and for my square
box to position relative to the edges of the right container.

I eventually settled on this, which works and uses nested DIVs:

http://www.singley.org/test/two_cols1.html

So, mostly for my own learning, I'd like to know how to implement this
layout without the nested DIV design.

#left{
float:left;
width:200px;
background-color: #eee;
height:300px;
}
#right{
margin-left:200px;
position:relative;
background-color: #333;
height:300px;
}
#positioned-item{
position:absolute;
top:50px;
left:50px;
height: 30px;
width: 30px;
border: 1px solid red;
background-color: #fcf;
}

<div id="left">
</div>
<div id="right">
<div id="positioned-item">&nbsp;</div>
</div>

I don't know why you want to position that item that way, a better set
of stylerules for that same html would be:

#left{
float:left;
width:200px;
background-color: #eee;
height:300px;
}
#right{
margin-left:200px;
border:1px solid
background-color: #333;
border:1px solid #333; /* to keep margins of content inside */
height:300px;
}
#positioned-item{
height: 30px;
width: 30px;
border: 1px solid red;
background-color: #fcf;
margin-left:49px;
margin-top:49px;
}

Not tested (2x).

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Electric Boys - Dying To Be Loved