flexible header

**dotJoon** · Aug 19, 2004 22:45

I am working on http://www.pmob.co.uk/temp/2colfixedtest_4.htm.

Left column and Centre column are flexible as you can see at at http://www.pmob.co.uk/temp/2colfixedtest_3.htm
and http://www.pmob.co.uk/temp/2colfixedtest_2.htm.

The length of the contents of the columns could be either long and short.

What I want to is making not only columns(Left & Right)
but also rows(especially, header) flexible.

Since the header is fixed by "HEIGHT: 70px",
It's not flexible Although Left & Centre are flexible.

Can I make the header flexible?
(The length of the contents of the header could be either long and short.)

If you visit at http://220.89.242.19:8500/test/test.cfm, you might understand more clearly about what I am trying to do.
The following is its whole code.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<title>SIS</title>
		
		<STYLE type=text/css>
		
			HTML { HEIGHT: 100% }
            BODY { HEIGHT: 100% }
			
			BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: pink; PADDING-BOTTOM: 0px; MARGIN: 0px; 
			       COLOR: #000000; PADDING-TOP: 0px }				   				   
				   
			#outer { BORDER-RIGHT: #000 1px solid; MIN-HEIGHT: 100%; BACKGROUND: #f8e7ec; 
					MARGIN-BOTTOM: -52px; MARGIN-LEFT: 160px; BORDER-LEFT: #000 1px solid; COLOR: #000000; HEIGHT: 100% }
					
			UNKNOWN { HEIGHT: auto }
			
			#header { BORDER-TOP: #000 1px solid; BACKGROUND: yellow; LEFT: 0px; OVERFLOW: hidden; 
			          WIDTH: 100%; COLOR: #000000; BORDER-BOTTOM: #000 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 70px }
					  
			#left { FLOAT: left; MARGIN-LEFT: -159px; WIDTH: 160px; PADDING-TOP: 72px; POSITION: relative }
			
			#left P { PADDING-RIGHT: 2px; PADDING-LEFT: 3px }
			
			#footer { CLEAR: both; BORDER-TOP: #000 1px solid; WIDTH: 100%; COLOR: #000000; 
			          BORDER-BOTTOM: #000 1px solid; POSITION: relative; HEIGHT: 50px; BACKGROUND-COLOR: none; TEXT-ALIGN: center}

 			HTML #footer { HEIGHT: 50px }
			
			#clearheader { HEIGHT: 72px }
			
			#clearfooter {	CLEAR: both; HEIGHT: 40px }
			
			DIV { MARGIN-TOP: 0px }
			
			P { MARGIN-TOP: 0px }
			
 			HTML #centrecontent { MARGIN-BOTTOM: 12px; HEIGHT: 1% }
		</STYLE>

		<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">

	</head>

	<body>
	
		<DIV id=outer>
			<DIV id=left>
				<P>
					Left Content goes here : Left Content goes here : Left Content goes here : 
					Left Content goes here : Left Content goes here : Left Content goes here : 
					Left Content goes here : Left Content goes here : Left Content goes here : 
					Left Content goes here : 
				</P>
			</DIV>
			
			<DIV id=clearheader></DIV><!-- to clear header -->
			
			<DIV id=centrecontent><!--centre content goes here -->

				<P>Centre Content goes here</P>

				<P>
					2 column layout - any column can be the longest. Footer will stay at bottom 
					of window unless content is greater then it stays at bottom of document.
				</P>
			
				<P>
					Only tested on PC (IE5, 5.5 , 6, Mozilla 1.2 , Firebird 0.6.1, 
					Opera7,Netscape 6.2). Opera 6 doesn't like the footer but it's usable.I expect 
					mac and other browsers will fall over. (<STRONG>*Update*</STRONG> Mac Firebird 
					and Mac Netscape 6 &amp; 7 (OS9) look perfect in all cases. Mac IE 5.1.7 &amp; 
					IE5.2.3 and Safari1.1.1 don't like the footer and render it at bottom of the 
					longest column. However the columns works fine ane the effect is still usable. 
					Thanks to a number of people for checking this out for me as I don't have a mac 
					to test on.)
				</P>
				<P>The left column colours are the background showing through.</P>
				<P>
					There is nothing special about this demo as similar techniques have been used 
					before, however they are not usually integrated into one example. The secret to 
					this demo is the left column which is floated negatively from the centre 
					container. If you float them completely in the gaps at the side then they don't 
					clear the footer. However if you leave them overlapping the centre content by 1 
					pixel then the footer is pushed down as required. The difference can be made up 
					with padding etc.
				</P>
				<P>
					There is nothing special about this demo as similar techniques have been used 
					before, however they are not usually integrated into one example. The secret to 
					this demo is the left column which is floated negatively from the centre 
					container. If you float them completely in the gaps at the side then they don't 
					clear the footer. However if you leave them overlapping the centre content by 1 
					pixel then the footer is pushed down as required. The difference can be made up 
					with padding etc.
				</P>
				<P>
					There is nothing special about this demo as similar techniques have been used 
					before, however they are not usually integrated into one example. The secret to 
					this demo is the left column which is floated negatively from the centre 
					container. If you float them completely in the gaps at the side then they don't 
					clear the footer. However if you leave them overlapping the centre content by 1 
					pixel then the footer is pushed down as required. The difference can be made up 
					with padding etc.
				</P>
				<P>
					There is nothing special about this demo as similar techniques have been used 
					before, however they are not usually integrated into one example. The secret to 
					this demo is the left column which is floated negatively from the centre 
					container. If you float them completely in the gaps at the side then they don't 
					clear the footer. However if you leave them overlapping the centre content by 1 
					pixel then the footer is pushed down as required. The difference can be made up 
					with padding etc.
				</P>
			</DIV>
		
			<DIV id=clearfooter></DIV><!-- to clear footer -->
		
		</DIV><!-- end outer div -->


		<DIV id=footer>
			Footer - | 
			<A href="http://www.pmob.co.uk/temp/2colfixedtest_3.htm">Left column longest</A> | 
			<A href="http://www.pmob.co.uk/temp/2colfixedtest_2.htm">Centre column longest</A> |
 			<A href="http://www.pmob.co.uk/temp/2colfixedtest_4.htm">No Column Longest</A> | 
			- Footer 
		
			<P></P>
		</DIV>
		
		<DIV id=header>
			<p>
				As the text in this header become large, I like to make this yellow part become large. 
				However the last part of this text is hidden as you see. How can I fix this?<br>
				As the text in this header become large, I like to make this yellow part become large. 
				However the last part of this text is hidden as you see. How can I fix this?<br>	
				As the text in this header become large, I like to make this yellow part become large. 
				However the last part of this text is hidden as you see. How can I fix this?<br>	
				As the text in this header become large, I like to make this yellow part become large. 
				However the last part of this text is hidden as you see. How can I fix this?<br>	
				As the text in this header become large, I like to make this yellow part become large. 
				However the last part of this text is hidden as you see. How can I fix this?<br>	
				As the text in this header become large, I like to make this yellow part become large. 
				However the last part of this text is hidden as you see. How can I fix this?<br>	

			</p>
			 
			 
		</DIV>

	</body>
</html>

**Paul O'B** · Aug 20, 2004 04:12

Your wish is my command

http://www.pmob.co.uk/temp/2colfixed...ibleheader.htm

Only tested in ie6 and firefox (I expect ie5 may have problems with it but haven't checked yet)

Paul

Edit:

update: works fine in ie5 and ie5.5 an NN6 (and is even usuable in NN4.7 if you don't mind all the borders and background being missing)

**dotJoon** · Aug 20, 2004 04:39

Great!

Thank you.

User Tag List

Thread: flexible header

Thread Tools

Display

flexible header

Bookmarks

Bookmarks

Posting Permissions