fixed left column and variable right

obiron · #1 (**permalink**) May 1st, 2007, 09:58

Hi guys,

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


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: Select all

 
.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 · #2 (**permalink**) May 1st, 2007, 11:47

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 · #3 (**permalink**) May 1st, 2007, 14:39

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

Here is the HTML

HTML: Select all

<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: Select all

 
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 · #4 (**permalink**) May 3rd, 2007, 12:26

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

moojoo · #5 (**permalink**) May 3rd, 2007, 18:34

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How can I add in a 3rd column in on the right like the one on the left ?	nizmotine	Web Page Design	7	Aug 13th, 2007 12:28
Fixed background?!	supanova75	Web Page Design	5	Aug 10th, 2007 23:40
Fluid HTML Page with one fixed column width problem	melc26	Web Page Design	1	Aug 24th, 2005 21:46
..copy data from column A in Table A to column B in Table B?	gecastill	Databases	10	Jun 23rd, 2005 18:27

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
fixed left column and variable right