3 colums layout: div positioning

[Joy]

Hi guys, I am in a tricky situation, I really really hope someone will help
me.

I got a layout with a main container and three colums inside.
Main container: 100% height; 90% width; float: left
First colum: 100% height; 200px width; float: left
Second colum: 100% height; 200px width; float: right
Third colum: 100% height

And here I stop, because nothing seems to work in order to set correctly
third colum to take all remaining space inside the main container (I don't
want to make third colum fixed because I want it resizable by resolution).

I have tried many configurations with positioning but didn't solved the
problem.

How can I manage? Is it possible to make it work with 2 fixed and one
resizable colums? Thanks to all.

[Neal]

On Mon, 6 Sep 2004 22:40:06 +0200, Joy <jo*@nospam.net> wrote:

Hi guys, I am in a tricky situation, I really really hope someone will
help
me.

I got a layout with a main container and three colums inside.
Main container: 100% height; 90% width; float: left
What are you floating this main container left OF? Float is meant to move
an item to one side and allow the following content to start at the same
vertical position. I don't think you really want to float this container.
But do set position: relative; to make it serve as a containing block.
First colum: 100% height; 200px width; float: left
Second colum: 100% height; 200px width; float: right
Third colum: 100% height

And here I stop, because nothing seems to work in order to set correctly
third colum to take all remaining space inside the main container (I
don't
want to make third colum fixed because I want it resizable by
resolution).

I have tried many configurations with positioning but didn't solved the
problem.

How can I manage? Is it possible to make it work with 2 fixed and one
resizable colums? Thanks to all.

Sure. Make the center column - the one which takes all remaining space -
have left and right margins of 200px. Float the other two left and right
prior to this div, it'll work fine.

[Els]

Joy wrote:

Hi guys, I am in a tricky situation, I really really hope
someone will help me.

I got a layout with a main container and three colums
inside. Main container: 100% height; 90% width; float: left
First colum: 100% height; 200px width; float: left
Second colum: 100% height; 200px width; float: right
Third colum: 100% height

And here I stop, because nothing seems to work in order to
set correctly third colum to take all remaining space
inside the main container (I don't want to make third colum
fixed because I want it resizable by resolution).

I have tried many configurations with positioning but
didn't solved the problem.

How can I manage? Is it possible to make it work with 2
fixed and one resizable colums? Thanks to all.

container: don't float it.
first column: float left
second column: float left
third column: don't float it, give it a left margin of 400px.

This is, assuming that first second and third columns are to
appear in that order.
However, I think you mean the order as 1st, 3rd, 2nd.
I'll rename them for "logicality":

container: don't float it.
left column: float left
right column: float right
middle column: don't float it, give it a left and a right
margin, each 200px :-)

Next problem to solve:
Iirc, the 100% height will mean the background color stops at
the bottom of the viewport, and will leave the rest of the
columns without colouring when scrolling up.
;-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Neal]

On 6 Sep 2004 21:00:53 GMT, Els <el*********@tiscali.nl> wrote:

Next problem to solve:
Iirc, the 100% height will mean the background color stops at
the bottom of the viewport, and will leave the rest of the
columns without colouring when scrolling up.
;-)

Best way I know of to solve this little dilemma is to set, on the center
column:

border-right: 200px solid #ccc;
border-left: 200px solid #ccc;

instead of margins. Since the floated element will not match the height of
the center one, this is the only sure way to give that illusion.

Another cumbersome way is to use two containing divs nested. Set one with
a background image 1px high by 200px wide, set it left and repeat-y. This
is the background image for the left column. Repeat with the other div
except set it to the right. This can only work with pixel-width columns,
which as we all know by now can pose problems when users need to resize
text.

[Els]

Neal wrote:

On 6 Sep 2004 21:00:53 GMT, Els <el*********@tiscali.nl>
wrote:

Next problem to solve:
Iirc, the 100% height will mean the background color stops
at the bottom of the viewport, and will leave the rest of
the columns without colouring when scrolling up.
;-)
Best way I know of to solve this little dilemma is to set,
on the center column:

border-right: 200px solid #ccc;
border-left: 200px solid #ccc;

instead of margins. Since the floated element will not
match the height of the center one, this is the only sure
way to give that illusion.

Unless the floated div(s) are higher than the middle column.
And I haven't tried it, but would you not need a z-index on
the floats to make them cover the borders of the center
column?
Another cumbersome way is to use two containing divs
nested. Set one with a background image 1px high by 200px
wide, set it left and repeat-y. This is the background
image for the left column. Repeat with the other div except
set it to the right. This can only work with pixel-width
columns, which as we all know by now can pose problems when
users need to resize text.

If one of the two side columns would be fixed (maybe for
pictures?) then the other one could be in ems or percentage.
Have the background-image of the flexible one in the outer
container div, set to "repeat", and the one of the fixed
column in the inner container div, set to "repeat-y".

Which only works as long as the center content is longer than
the flexible side content, or if it doesn't matter that the
colour goes below that center content.

But of course there still is the possibility of all three
columns having the same background colour ;-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Neal]

On 6 Sep 2004 22:14:05 GMT, Els <el*********@tiscali.nl> wrote:

Neal wrote:

border-right: 200px solid #ccc;
border-left: 200px solid #ccc; Unless the floated div(s) are higher than the middle column.

True - though this is rare, it is a limitation.
And I haven't tried it, but would you not need a z-index on
the floats to make them cover the borders of the center
column?

Nope, no need. The float will go over the border.