fixed left column and variable right

obiron · May 1st, 2007, 06:58 AM

Hi guys,

I am sure this must have been asked a thousand times but I cant find an answer on the web.

Code:


			
1-------------------------------------------------------+
|2---+3------------------------------------------------+|
||   ||4----------------------------------------------+||
||   |||                                        5----+|||
||   |||                                        |    ||||
||   |||                                        +----+|||
||   ||+----------------------------------------------+||
|+---++------------------------------------------------+|
+-------------------------------------------------------+
 
6-------------------------------------------------------+
|7---------------+8-------------------+9---------------+|
||               ||                   ||               ||
||               ||                   ||               ||
||               ||                   ||               ||
||               ||                   ||               ||
|+---------------++-------------------++---------------+|
+-------------------------------------------------------+

1 and 6 are wrappers.
2 and 3 are inner divs of 1
4 is an inner div of 3
5 is an inner div of 4
7,8,9 are inner divs of 6

1 and 6 are full width, depending on window width but are fixed height
2 is the menu and is always full height of container 1 and it's width is 15% or 150px which ever is the larger
3 is the remaining width of 1
5 is a logo and is always 150px x 150px. This is floated right so that the text in 4 flows round it
7,8,9 are all the same size and each takes up 1/3 of the available width.

in FF when you shrink the window, 3 misbehaves and jumps below the menu.
Can anyone point me in the right direction of a site with a similar layout so I can crib the position rules.

Code:

 
.1  {background-color:cyan;height:400;border-color:black;border-width:0px;padding:0px;margin:0px;position:relative;overflow:auto}
.2  {background-color:yellow;width:180px;height:100%;border-color:black;border-width:2px;float:left}
.3  {background-color:green;   border-color:black;border-width:2px;float:left}
.5  {background-color:white;width:150;height:150;border-color:black;border-width:2px;float:right;top:0;right:0}
.4  {background-color:blue;width:100%;height:400;border-color:black;border-width:2px;position:relative}
.6r {background-color:pink;width:100%;height:250;border-color:black;border-width:2px;float:left; position:relative}
.7  {background-color:red;width:33%;height:250;border-color:black;border-width:2px;float:left;border-width:0px;padding:0px;margin:0px}
.8  {background-color:orange;width:34%;height:250;border-color:black;border-width:2px;float:left;border-width:0px;padding:0px;margin:0px}
.9 {background-color:brown;width:33%;height:250;border-color:black;border-width:2px;float:right;border-width:0px;padding:0px;margin:0px}

the colours are just so I can see what is going on.

Thanks in advance

Obiron

karinne · May 1st, 2007, 08:47 AM

Too early for me to understand all those numbers ... Just tell us what you are trying to achieve! From your subject you want a left column that fixed width and the right fluid?

http://bonrouge.com/2c-hf-fluid(r).php

obiron · May 1st, 2007, 11:39 AM

yes, just like that. but mine doesn't want to play.

Here is the HTML

HTML Code:

<html>
<head>
<LINK REL=StyleSheet HREF=../styles/layout.css />
<title></title>
</head>
<body>
<DIV class="topcontainer">
    <DIV class="menu"> menu
    </DIV>
    <DIV class="mainlogocontainer">
        <DIV class="main"><DIV class="logo"> logo
        </DIV> This is enough text to make the main container overflow.
        This is enough text to make the main container overflow.This is enough text to make the main container overflow.
        This is enough text to make the main container overflow.This is enough text to make the main container overflow.
        This is enough text to make the main container overflow.This is enough text to make the main container overflow.
        This is enough text to make the main container overflow.This is enough text to make the main container overflow.
        This is enough text to make the main container overflow.This is enough text to make the main container overflow.
        This is enough text to make the main container overflow.This is enough text to make the main container overflow.
        This is enough text to make the main container overflow.This is enough text to make the main container overflow.
        This is enough text to make the main container overflow.This is enough text to make the main container overflow.
        This is enough text to make the main container overflow.This is enough text to make the main container overflow.
        This is enough text to make the main container overflow.This is enough text to make the main container overflow.
        This is enough text to make the main container overflow.This is enough text to make the main container overflow.
        This is enough text to make the main container overflow.This is enough text to make the main container overflow.
        This is enough text to make the main container overflow.This is enough text to make the main container overflow.
        This is enough text to make the main container overflow.This is enough text to make the main container overflow.
        This is enough text to make the main container overflow.This is enough text to make the main container overflow.
        </DIV>
    </DIV>
</DIV>
<DIV class="smallcontainer">
  <DIV class="smallleft"> left
  </DIV>
  <DIV class="smallmid">  mid
  </DIV>
  <DIV class="smallright"> right
  </DIV>
</DIV>
</body>
</html>

and here is the style sheet

Code:

 
body {font-family :arial; background-color:silver;}
.topcontainer      {background-color:cyan;height:400;border-color:black;border-width:0px;padding:0px;margin:0px;position:relative;overflow:auto}
.menu              {background-color:yellow;width:180px;height:100%;border-color:black;border-width:2px;float:left}
.mainlogocontainer {background-color:green;   border-color:black;border-width:2px;float:left}
.logo              {background-color:white;width:150;height:150;border-color:black;border-width:2px;float:right;top:0;right:0}
.main              {background-color:blue;width:100%;height:400;border-color:black;border-width:2px;position:relative}
.smallcontainer    {background-color:pink;width:100%;height:250;border-color:black;border-width:2px;float:left; position:relative}
.smallleft         {background-color:red;width:33%;height:250;border-color:black;border-width:2px;float:left;border-width:0px;padding:0px;margin:0px}
.smallmid          {background-color:orange;width:34%;height:250;border-color:black;border-width:2px;float:left;border-width:0px;padding:0px;margin:0px}
.smallright        {background-color:brown;width:33%;height:250;border-color:black;border-width:2px;float:right;border-width:0px;padding:0px;margin:0px}

If you look at in in IE6 and close the window, the top retains it height and the scroll bar appears for the overflow of the main panel.

If you do the same in FF then when you squeeze the window it is OK until you hit the min-width for the menu then the main panel jumps below the menu and the scroll bar does't appear until the window is too narrow for the text.

I think the behaviour is different from the example you posted becuase of the second window wide container but I don;t know why.

obiron · May 3rd, 2007, 09:26 AM

Its becuase 2 and 3 are siblings. If I put 2 inside 3 then it behaves in both IE and FF.

moojoo · May 3rd, 2007, 03:34 PM

http://www.newguyinennis.com/samples..._column_fluid/