4 replies [Last post]
Tim24
Offline
newbie
Last seen: 14 years 39 weeks ago
Joined: 2005-02-23
Posts: 4
Points: 0

Hi everybody,

a have a big problem with my layout and hope that somebody will help me !!!

Is it possible to use one static column and 2 dynamic ? And when how i have to set the width % that my site will be completed filled up ?? The second thing is how to set the position of the footer that it will be always on the end of the site ?

I want to have my layout like following:

Header
width:100%

Column left
position:absolut
width: 165px

column middle
width: x%

column right
width: x%

footer
width: 100%

Has somebody any idea ? Is this layout practically possible ?

Thanx

Tim

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

1x static column 2x dynamic column ?

have a look at this -- http://www.pmob.co.uk/temp/3colfixedtest_sourcenone.htm

not so sure about the two dynamic columns, but if you take a look at the layout above and change the width on one of the two fixed columns (left or right) to a % you may get what you are after.

Tim24
Offline
newbie
Last seen: 14 years 39 weeks ago
Joined: 2005-02-23
Posts: 4
Points: 0

1x static column 2x dynamic column ?

super ! thanx for your fast reply !

Like it is shown in the example it would be great to have !

But i am just starting to work with css and it would be super when u could show me a short code example of that site !!!!

Thanx

Tim

Tim24
Offline
newbie
Last seen: 14 years 39 weeks ago
Joined: 2005-02-23
Posts: 4
Points: 0

1x static column 2x dynamic column ?

Sorry, i was to stupid to check the source !

Now i get it !!

Thanx

Tim24
Offline
newbie
Last seen: 14 years 39 weeks ago
Joined: 2005-02-23
Posts: 4
Points: 0

1x static column 2x dynamic column ?

What i do wrong ??

I was changing my imagination about the layout ! I guess it will be better when i have place in the main div (following outer) just a navigation box float:right ! But now i have no idea what i was doing wrong !

The second thing is that in the example the footer is exactly on the end of the page, in my u have to scroll ! What can be the problem ??

Example what i was overtaking http://www.pmob.co.uk/temp/2colfixedtest_4.htm

My website http://www.lantek.pl/lantek/cms/front_content.php?idart=75

My code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>LANtek.pl</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

<meta name="keywords" content="lantek, lantek.pl">
<meta name="author" content="Tim Oldenburg">
<meta name="page-topic" content="LANtek.pl Sp. z o.o.">
<meta name="Content-language" content="pl">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="revisit" content="2 days">
<meta name="copyright" content="LANtek.pl Sp. z o.o.">
<meta name="publisher" content="LANtek.pl Sp. z o.o.">
<meta name="expires" content="never">

<link rel="StyleSheet" href="css/standard.css" type="text/css">

/* mac hide \*/
html, body {height:100%}
/* end hide*/

</head>
<body>

<div id="outer"> 
  <div id="left"> 
  <!--navi-->
      CMS_CONTAINER[1] 
      <!--navi ende-->

      <!--navi-->
      CMS_CONTAINER[2] 
      <!--navi ende-->

      <!--navi-->
      CMS_CONTAINER[3] 
      <!--navi ende-->

      <!--navi-->
      CMS_CONTAINER[4] 
      <!--navi ende-->


      <p> </p>

<!---------- Begin Inquiero.com integration ---------->
<script language="JavaScript" src="http://www.inquiero.com/inquiero/web/an/ann4.asp?login=I21AM8q984984L8&lang=en&button=lantek2005&cat=technical"></script>

<!---------- End Inquiero.com integration ---------->

  </div>
  <div id="clearheader"></div>  <!-- to clear header -->
	<div id="centrecontent"><!--centre content goes here -->

<div id="menu-right">
<p class="menutitle">MENU 2</p>
&raquo; <br />
&raquo; <br />
&raquo; <br />
&raquo; <br />
&raquo; <br />
</div>
  <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>
  </div>
  <div id="clearfooter"></div>  <!-- to clear footer -->
</div><!-- end outer div -->

<div id="footer">Footer - | <a href="2colfixedtest_3.htm">Left column longest</a> 
  | <a href="2colfixedtest_2.htm">Centre column longest</a> | <a href="2colfixedtest_4.htm">No 
  Column Longest</a> | - Footer 
  <p></p>
</div>

<div id="header">
<div id="lang"> Polski [zmieñ] | Strona G³owa </div>
<img src="upload/Website/logo-trans-klein.gif" style="float:left;" alt="Logo"></div>
</body>
</html>

and last but not least

my css

body {
	padding:0;
	margin:0;
	background:#D0DCF0;
	color: #000000;
}

#lang {
background-image:url(../upload/Website/lang.png);
float:right;
width:260px;
height:30px;
border:0px solid black;
padding:0px;
text-indent:40px;
font-family:verdana;
font-size: x-small;
vertical-align:text-bottom;
}

#outer{
	min-height:100%;/*for mozilla as IE treats height as min-height anyway*/
	margin-left:165px;
	background:#Ffffff;
	border-left:1px solid #000;
	border-right:1px solid #000;
	margin-bottom:-52px;
	color: #000000;
}
* html #outer{height:100%;margin-left:164px}/* ie 3 pixel jog*/ 
#header{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:70px;
	background:#6699ff;
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	overflow:hidden;
	color: #000000;
}
#left {
	position:relative;/*ie needs this to show float */
	width:165px;
	float:left;
	margin-left:-164px;/*must be 1px less than width otherwise won't push footer down */
	padding-top:72px;/*needed to make room for header*/
padding-left:2px;
	left:-1px/* line things up exactly*/
}
* html #left {margin-right:-3px}/* three pixel jog*/
#left p {padding-left:3px;padding-right:2px}


#footer {
	width:100%;
	clear:both;
	height:50px;
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	background-color: #FF8080;
	color: #000000;
	text-align:center;
	position:relative;
}
* html #footer {/*only ie gets this style*/
	\height:52px;/* for ie5 */
	he\ight:50px;/* for ie6 */
}
#clearheader{height:72px;}/*needed to make room for header*/
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
div,p  {margin-top:0}/*clear top margin for mozilla*/
* html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */

#menue-right {
border:1px solid #ffffff;
background-color:#336666;
width:120px;
padding:5px;
margin:5px;
line-height:30px;
color:#ffffff;
float:right;
}
.menutitle
{
margin:-5px -5px 5px -5px;
padding:2px;
background-color:#003333;
color:#eeeeee;
font-weight:bold;
border-bottom:1px solid #ffffff;
}

Thanx for help

cu

Tim