Learn VBA & Macros in 1 Week!

CSS - Problem Positioning At The Bottom Of The Page

Full Excel VBA Course - Beginner to Expert

Problem Positioning At The Bottom Of The Page	View Content

I am testing a three column layout with a header and a footer using only CSS. Ordinarily it works fine but when the center column has less height than the left or right columns (due to amount of content in each) then the footer overlaps the left or right column as it positions itself to just below the center column.

Can anyone figure out why? I am baffled since the footer has an absolute position of left: 0px and bottom: 0px;

Here is my HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>page title</title>
<style type="text/css">
body {
	margin:0px;
	padding:0px;
	height: 100%;
}
.left-col { 
	position: absolute; 
	width: 150px;
	top: 130px; 
	left: 0px;
	padding-left: 3px;
	z-index: 2;
}

.right-col {	
	position: absolute; 
	width: 150px;
	top: 120px;
	right: 0;
	padding-right: 3px;	
	z-index: 1;
	overflow: hidden;
	clear: both;
}

.center-col {
	position: relative;
	min-width: 300px;
	min-height: 100%;
	height: 100%;
	z-index: 3;
	top: 140px;
	margin: 0px 160px 150px 170px;
	text-align: left;
	padding:5px;
}

.heading { 
	position: absolute;
	left: 0px;
	top: 0px;
}

.footer {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 0px;
	z-index: 3;
	padding-top: 25px;
	margin: 0px;
	display: block;
}

.footer-bar {
	width: auto;
	padding:10px 3px 3px 0px;
	clear: both;
	background-color: gray;
	vertical-align: bottom;
	text-align: center;
}
</style>
</head>
<body>
<div class="center-col">
	center content<br />
	center content<br />
	center content<br />
	center content<br />
</div>

<div class="left-col">
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
</div>

<div class="right-col">
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
</div>

<div class="heading">
	head content
</div>

<div class="footer">
	<div class="footer-bar">page bottom</div>
</div>
</body>
</html>

Full Excel VBA Course - Beginner to Expert

Absolute Positioning: Problem With Bottom

Similar Tutorials

View Content

I am trying to make a layout with a background image with 3 content boxes layered on top of it. The first two boxes are position correctly. They are offset top, left and top, right respectively. The third box should be positioned bottom, left but for some reason it isn't working. The left offset is working correctly, but instead of positioning itself off of the bottom of the container div, it positions itself that much above the viewport. If I set the bottom property to negative something, it acts like a top offset. While this is a workaround, it does not provide acceptable functionality. Anyone have any ideas? I've had two friends who are both seasoned web developers look at this and they were both stumped. I can post images of what it looks like and what it should look like if desired. Both of these code sections are php generating the html and css respectively.

html:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<title><?=$title?></title>
		<link rel="stylesheet" type="text/css" href="./themes/<?=$theme?>/css/main.php" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#bottom_ccw").attr({ scrollTop: $("#bottom_ccw").attr("scrollHeight") });
			});
		</script>
	</head>
	<body>
		<div id="wrapper">
			<div id="inner_wrapper">
				<div id="background"></div>
				<div id="left_bw">
					<div class="top_b">
						<div class="border_tl"></div>
						<div id="l_border_t"></div>
						<div class="border_tr"></div>
					</div>
					<div>
						<div id="l_border_l"></div>
						<div id="l_border_r"></div>
					</div>
					<div class="bot_b">
						<div class="border_bl"></div>
						<div id="l_border_b"></div>
						<div class="border_br"></div>
					</div>
				</div>
				<div id="left_ccw">
					<div id="cc1">
						<?for($i=0;$i<500;$i++):?>1	<?endfor;?>
					</div>
				</div>
				<div id="right_bw">
					<div class="top_b">
						<div class="border_tl"></div>
						<div id="r_border_t"></div>
						<div class="border_tr"></div>
					</div>
					<div>
						<div id="r_border_l"></div>
						<div id="r_border_r"></div>
					</div>
					<div class="bot_b">
						<div class="border_bl"></div>
						<div id="r_border_b"></div>
						<div class="border_br"></div>
					</div>
				</div>
				<div id="right_ccw">
					<div id="cc2">
						<?for($i=0;$i<1200;$i++):?>2	<?endfor;?>
					</div>
				</div>
				<div id="bottom_bw">
					<div class="top_b">
						<div class="border_tl"></div>
						<div id="b_border_t"></div>
						<div class="border_tr"></div>
					</div>
					<div>
						<div id="b_border_l"></div>
						<div id="b_border_r"></div>
					</div>
					<div class="bot_b">
						<div class="border_bl"></div>
						<div id="b_border_b"></div>
						<div class="border_br"></div>
					</div>
				</div>
				<div id="bottom_ccw">
					<div id="cc3">
						<?for($i=0;$i<200;$i++):?>3	<?endfor;?>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

css:
css Code:
Original - css Code <? header("Content-type: text/css"); ?> <? //Left content box width. $lcbw = 300; //Left content box height. $lcbh = 443; //Left content box horizontal offset. $lcbho = 100; //Left content box vertical offset. $lcbvo = 55; //Right content box width. $rcbw = 550; //Right content box height. $rcbh = 550; //Right content box horizontal offset. $rcbho = 100; //Right content box vertical offset. $rcbvo = 55; //Bottom content box width. $bcbw = 300; //Bottom content box height. $bcbh = 100; //Bottom content box horizontal offset. $bcbho = 100; //Bottom content box vertical offset. $bcbvo = 0; ?> /* Equalize the padding and margin for all elements across all browsers. */ * { padding: 0px; margin: 0px; } /* Generic top section for a content box. */ .top_b { clear: right; } /* Generic bottom section for a content box. */ .bot_b { clear: left; } /* Top left corner of a border. */ .border_tl { float: left; background: url('../images/main/border_tl.png'); width: 26px; height: 25px; } /* Top right corner of a border. */ .border_tr { float: left; background: url('../images/main/border_tr.png'); width: 26px; height: 25px; } /* Bottom left corner of a border. */ .border_bl { float: left; background: url('../images/main/border_bl.png'); width: 26px; height: 25px; } /* Bottom right corner of a border. */ .border_br { float: left; background: url('../images/main/border_br.png'); width: 26px; height: 25px; } /* Main site wrapper. */ #wrapper { margin: auto; width: 1057px; padding-top: 5px; } /* Main site inner wrapper. */ #inner_wrapper { position: relative; } /* The background element. */ #background { background: url('../images/main/background.png'); width: 1057px; height: 679px; position: absolute; z-index: 1; } /* Left content box borders wrapper. */ #left_bw { position: absolute; z-index: 2; top: <?=$lcbvo?>px; left: <?=$lcbho?>px; width: <?=$lcbw?>px; height: <?=$lcbh?>px; } /* Left content box top border. */ #l_border_t { float: left; background: url('../images/main/border_top.png'); width: <?=($lcbw-52)?>px; height: 14px; } /* Left content box left border. */ #l_border_l { float: left; background: url('../images/main/border_left.png'); width: 14px; height: <?=($lcbh-50)?>px; } /* Left content box right border. */ #l_border_r { float: right; background: url('../images/main/border_right.png'); width: 14px; height: <?=($lcbh-50)?>px; } /* Left content box bottom border. */ #l_border_b { margin-top: 11px; float: left; background: url('../images/main/border_bottom.png'); width: <?=($lcbw-52)?>px; height: 14px; } /* Left content container wrapper. */ #left_ccw { position: absolute; z-index: 3; top: <?=($lcbvo+14)?>px; left: <?=($lcbho+14)?>px; width: <?=($lcbw-28)?>px; height: <?=($lcbh-28)?>px; overflow: hidden; } /* Left content container. */ #cc1 { padding: 5px; } /* Right content box borders wrapper. */ #right_bw { position: absolute; z-index: 2; top: <?=$rcbvo?>px; right: <?=$rcbho?>px; width: <?=$rcbw?>px; height: <?=$rcbh?>px; } /* Right content box top border. */ #r_border_t { float: left; background: url('../images/main/border_top.png'); width: <?=($rcbw-52)?>px; height: 14px; } /* Right content box left border. */ #r_border_l { float: left; background: url('../images/main/border_left.png'); width: 14px; height: <?=($rcbh-50)?>px; } /* Right content box right border. */ #r_border_r { float: right; background: url('../images/main/border_right.png'); width: 14px; height: <?=($rcbh-50)?>px; } /* Right content box bottom border. */ #r_border_b { margin-top: 11px; float: left; background: url('../images/main/border_bottom.png'); width: <?=($rcbw-52)?>px; height: 14px; } /* Right content container wrapper. */ #right_ccw { position: absolute; z-index: 3; top: <?=($rcbvo+14)?>px; right: <?=($rcbho+14)?>px; width: <?=($rcbw-28)?>px; height: <?=($rcbh-28)?>px; overflow: hidden; } /* Right content container. */ #cc2 { padding: 5px; } /* Bottom content box borders wrapper. */ #bottom_bw { position: absolute; z-index: 2; bottom: <?=$bcbvo?>px; left: <?=$bcbho?>px; width: <?=$bcbw?>px; height: <?=$bcbh?>px; } /* Bottom content box top border. */ #b_border_t { float: left; background: url('../images/main/border_top.png'); width: <?=($bcbw-52)?>px; height: 14px; } /* Bottom content box left border. */ #b_border_l { float: left; background: url('../images/main/border_left.png'); width: 14px; height: <?=($bcbh-50)?>px; } /* Bottom content box right border. */ #b_border_r { float: right; background: url('../images/main/border_right.png'); width: 14px; height: <?=($bcbh-50)?>px; } /* Bottom content box bottom border. */ #b_border_b { margin-top: 11px; float: left; background: url('../images/main/border_bottom.png'); width: <?=($bcbw-52)?>px; height: 14px; } /* Bottom content container wrapper. */ #bottom_ccw { position: absolute; z-index: 3; bottom: <?=($bcbvo+14)?>px; left: <?=($bcbho+14)?>px; width: <?=($bcbw-28)?>px; height: <?=($bcbh-28)?>px; overflow-x: hidden; overflow-y: scroll; } /* Bottom content container. */ #cc3 { padding: 5px; }

  

  


 <? header("Content-type: text/css"); ?>


 <?


     //Left content box width.


     $lcbw = 300;


     //Left content box height.


     $lcbh = 443;


     //Left content box horizontal offset.


     $lcbho = 100;


     //Left content box vertical offset.


     $lcbvo = 55;


     


     //Right content box width.


     $rcbw = 550;


     //Right content box height.


     $rcbh = 550;


     //Right content box horizontal offset.


     $rcbho = 100;


     //Right content box vertical offset.


     $rcbvo = 55;


     


     //Bottom content box width.


     $bcbw = 300;


     //Bottom content box height.


     $bcbh = 100;


     //Bottom content box horizontal offset.


     $bcbho = 100;


     //Bottom content box vertical offset.


     $bcbvo = 0;


 ?>


  


 /* Equalize the padding and margin for all elements across all browsers. */


 * {


     padding: 0px;


     margin: 0px;


 }


  


 /* Generic top section for a content box. */


 .top_b {


             clear: right;


         }


  


 /* Generic bottom section for a content box. */


 .bot_b {


             clear: left;


         }


  


 /* Top left corner of a border. */


 .border_tl {


                 float: left;


                 background: url('../images/main/border_tl.png');


                 width: 26px;


                 height: 25px;


             }


  


 /* Top right corner of a border. */


 .border_tr {


                 float: left;


                 background: url('../images/main/border_tr.png');


                 width: 26px;


                 height: 25px;


             }


  


 /* Bottom left corner of a border. */


 .border_bl {


                 float: left;


                 background: url('../images/main/border_bl.png');


                 width: 26px;


                 height: 25px;


             }


  


 /* Bottom right corner of a border. */


 .border_br {


                 float: left;


                 background: url('../images/main/border_br.png');


                 width: 26px;


                 height: 25px;


             }


  


 /* Main site wrapper. */


 #wrapper {


             margin: auto;


             width: 1057px;


             padding-top: 5px;


         }


  


 /* Main site inner wrapper. */


 #inner_wrapper {


             position: relative;


         }


  


 /* The background element. */


 #background {


                 background: url('../images/main/background.png');


                 width: 1057px;


                 height: 679px;


                 position: absolute;


                 z-index: 1;


             }


  


 /* Left content box borders wrapper. */


 #left_bw {


                 position: absolute;


                 z-index: 2;


                 top: <?=$lcbvo?>px;


                 left: <?=$lcbho?>px;


                 width: <?=$lcbw?>px;


                 height: <?=$lcbh?>px;


             }


  


 /* Left content box top border. */


 #l_border_t {


                 float: left;


                 background: url('../images/main/border_top.png');


                 width: <?=($lcbw-52)?>px;


                 height: 14px;


             }


  


 /* Left content box left border. */


 #l_border_l {


                 float: left;


                 background: url('../images/main/border_left.png');


                 width: 14px;


                 height: <?=($lcbh-50)?>px;


             }


  


 /* Left content box right border. */


 #l_border_r {


                 float: right;


                 background: url('../images/main/border_right.png');


                 width: 14px;


                 height: <?=($lcbh-50)?>px;


             }


  


 /* Left content box bottom border. */


 #l_border_b {


                     margin-top: 11px;


                     float: left;


                     background: url('../images/main/border_bottom.png');


                     width: <?=($lcbw-52)?>px;


                     height: 14px;


                 }


  


 /* Left content container wrapper. */


 #left_ccw {


                 position: absolute;


                 z-index: 3;


                 top: <?=($lcbvo+14)?>px;


                 left: <?=($lcbho+14)?>px;


                 width: <?=($lcbw-28)?>px;


                 height: <?=($lcbh-28)?>px;


                 overflow: hidden;


             }


  


 /* Left content container. */


 #cc1 {


             padding: 5px;


         }


  


 /* Right content box borders wrapper. */


 #right_bw {


                 position: absolute;


                 z-index: 2;


                 top: <?=$rcbvo?>px;


                 right: <?=$rcbho?>px;


                 width: <?=$rcbw?>px;


                 height: <?=$rcbh?>px;


             }


  


 /* Right content box top border. */


 #r_border_t {


                 float: left;


                 background: url('../images/main/border_top.png');


                 width: <?=($rcbw-52)?>px;


                 height: 14px;


             }


  


 /* Right content box left border. */


 #r_border_l {


                 float: left;


                 background: url('../images/main/border_left.png');


                 width: 14px;


                 height: <?=($rcbh-50)?>px;


             }


  


 /* Right content box right border. */


 #r_border_r {


                 float: right;


                 background: url('../images/main/border_right.png');


                 width: 14px;


                 height: <?=($rcbh-50)?>px;


             }


  


 /* Right content box bottom border. */


 #r_border_b {


                     margin-top: 11px;


                     float: left;


                     background: url('../images/main/border_bottom.png');


                     width: <?=($rcbw-52)?>px;


                     height: 14px;


                 }


  


 /* Right content container wrapper. */


 #right_ccw {


                 position: absolute;


                 z-index: 3;


                 top: <?=($rcbvo+14)?>px;


                 right: <?=($rcbho+14)?>px;


                 width: <?=($rcbw-28)?>px;


                 height: <?=($rcbh-28)?>px;


                 overflow: hidden;


             }


  


 /* Right content container. */


 #cc2 {


             padding: 5px;


         }


  


 /* Bottom content box borders wrapper. */


 #bottom_bw {


                 position: absolute;


                 z-index: 2;


                 bottom: <?=$bcbvo?>px;


                 left: <?=$bcbho?>px;


                 width: <?=$bcbw?>px;


                 height: <?=$bcbh?>px;


             }


  


 /* Bottom content box top border. */


 #b_border_t {


                 float: left;


                 background: url('../images/main/border_top.png');


                 width: <?=($bcbw-52)?>px;


                 height: 14px;


             }


  


 /* Bottom content box left border. */


 #b_border_l {


                 float: left;


                 background: url('../images/main/border_left.png');


                 width: 14px;


                 height: <?=($bcbh-50)?>px;


             }


  


 /* Bottom content box right border. */


 #b_border_r {


                 float: right;


                 background: url('../images/main/border_right.png');


                 width: 14px;


                 height: <?=($bcbh-50)?>px;


             }


  


 /* Bottom content box bottom border. */


 #b_border_b {


                     margin-top: 11px;


                     float: left;


                     background: url('../images/main/border_bottom.png');


                     width: <?=($bcbw-52)?>px;


                     height: 14px;


                 }


  


 /* Bottom content container wrapper. */


 #bottom_ccw {


                 position: absolute;


                 z-index: 3;


                 bottom: <?=($bcbvo+14)?>px;


                 left: <?=($bcbho+14)?>px;


                 width: <?=($bcbw-28)?>px;


                 height: <?=($bcbh-28)?>px;


                 overflow-x: hidden;


                 overflow-y: scroll;


             }


  


 /* Bottom content container. */


 #cc3 {


             padding: 5px;


         }

Sorry I tried to get the HTML to highlight too but it wouldn't work.

Screenshot of how it looks:
http://i34.photobucket.com/albums/d105/alphasynaptic/wrong.jpg

Screenshot of how it should look (done with my hacky workaround):
http://i34.photobucket.com/albums/d105/alphasynaptic/right.jpg

Help - 3 Column Layout Problem - Body Content Pushed To Bottom Of Page

Similar Tutorials

View Content

Hi, I'm working on a website for a church and we're near completion, but I'm having trouble getting the site to display properly in IE7 on Windows XP and a few other browsers according to browsershots.org. CSS and XHTML both validate at w3c.org. I've ripped this thing apart and put it back together with no luck. The really weird thing is the Home page looks fine, but in the rest of the pages the body content gets pushed below the left and right navigation bars. Is it a CSS float problem? Margins or paddings???

Home page: Looks OK in IE7, at least on my machine - http://www.stlukeslutheran.com/index_temp.php
Ministry page: Content is pushed to bottom of page - http://www.stlukeslutheran.com/mini...ns_ministry.php

The CSS files are at http://www.stlukeslutheran.com/css/main.css and http://www.stlukeslutheran.com/css/common.css.

Would anyone be willing to take a look? Thanks in advance.

Positioning Problem First Time Page Is Viewed (ff, Ie)

Similar Tutorials

View Content

Hi, this is my first posting on these forums, so my apologies in advance if I break some unwritten rules.

I have developed a web page for friend who wanted four large area of the home page to act as buttons but not look like buttons. Each area contains an image and some text and the complete are should be clickable and should change colour when the mose moves over it.

I prefer a pure html/CSS solution rather than resorting to Javascript, so I came up with the following

The html for each area is:

<div id="homePageTopicArea">
<ul>
<li>
<a href="workshops.html">
<img src="images/homePage/topic1Image.jpg" />
<div class="homePageTopicTextHeader">
<h1>Inspiring Workshops</h1>
</div>
<div class="homePageTopicText">
<p>
This range of clear ..........
</p>
</div>
</a>
</li>

and the CSS is

#homePageTopicArea
{
height: 100%;
width: 734px;
margin-top: 10px;
margin-left: 280px;
}

#homePageTopicArea ul
{
list-style-type: none;
width: 734px;
padding-left: 0px;
margin-left: 0px;
}

#homePageTopicArea li
{
outline: none;
border: 0;
margin-top: 15px;
height: 145px;
}

#homePageTopicArea li a
{
display: block;
height: 145px;
outline: none;
text-decoration: none;
}

#homePageTopicArea li a:hover
{
background-color: #AEB8CB;
}

This works great when the page is viewed in Safari. But when I use Firefox 3.5.6 or IE7, I get an error on the page, the images are correctly positioned but the text from one of the boxes, always the second or third, never the first or last, is displayed in the wrong position, way too low down the screen, and it is in the bright blue, or purple, of an unmodified link code.

If you click on the refresh button the page always displays correctly.

Can anyone explain this behaviour?

I have screenshots but dont know how to attach them.

Positioning To Bottom Of Div

Similar Tutorials

View Content

I'm new here so Hello guys!

I have a problem with CSS - its probably really simplistic but i've been searching for ages and cant figure it out!

I have a long narrow DIV which is a header, then a much smaller DIV which is a small square picture. What i want is for the small picture to fit as tightly into the bottom left hand corner as possible. I've tried this:

Code:

Float:left;
postion:absolute;
bottom:0px;

but as i'm sure u can figure out that sends it to the bottom of the page and not the bottom of its parent DIV. Please can somebody let me know how it is possible to achieve this? hope this is coherrant and fairly simple to do!

thanks.

Footer Positioning At Bottom

Similar Tutorials

View Content

Hi!

i'm trying to position footer at the very bottom.
this example does it as expected (if the page is longer than viewport, footer will be at the end of page):
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title></title>		
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
		<style type="text/css">
        <!--
			body {
				margin: 0;
				padding: 0;
				font: 12px/1.5 verdana, arial, helvetica, sans-serif;
			}
			#content {
				padding: 10px;
				background-color: #ff8080;
			}
			#footer {
				position: absolute;  /* Needed for Safari */
				padding: 10px;
				background-color: #aa3939;
				width: 75%;
			}
			#footer h1 {
				padding-bottom: 0;
			}
			h1, p {
				margin: 0;
				padding-bottom: 1em;
			}
			h1 {
				font-size: 12px;
				line-height: 1.5em;
			}
        -->
        </style>
		<script type="text/javascript">
		<!--
		function getWindowHeight() {
			var windowHeight = 0;
			if (typeof(window.innerHeight) == 'number') {
				windowHeight = window.innerHeight;
			}
			else {
				if (document.documentElement && document.documentElement.clientHeight) {
					windowHeight = document.documentElement.clientHeight;
				}
				else {
					if (document.body && document.body.clientHeight) {
						windowHeight = document.body.clientHeight;
					}
				}
			}
			return windowHeight;
		}
		function setFooter() {
			if (document.getElementById) {
				var windowHeight = getWindowHeight();
				if (windowHeight > 0) {
					var contentHeight = document.getElementById('content').offsetHeight;
					var footerElement = document.getElementById('footer');
					var footerHeight  = footerElement.offsetHeight;
					if (windowHeight - (contentHeight + footerHeight) >= 0) {
						footerElement.style.position = 'absolute';
						footerElement.style.top = (windowHeight - footerHeight) + 'px';
					}
					else {
						footerElement.style.position = 'static';
					}
				}
			}
		}
		window.onload = function() {
			setFooter();
		}
		window.onresize = function() {
			setFooter();
		}
		//-->
		</script></head><body>
		<div id="content">
			<h1>Content</h1>
			<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		</div>
		<div style="position: absolute; top: 810px;" id="footer">
			<h1>Footer</h1>
		</div>
	</body></html>

but when i try to add left/right boxes, it fails. try to scroll down the page (footer is placed at the bottom of viewport, not page):
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
		<style type="text/css">
        		<!--
			body {
				margin: 0;
				padding: 0;
				font: 12px/1.5 verdana, arial, helvetica, sans-serif;
			}
			#head
			{
				padding-left:20px;
				padding-top:20px;
				padding-right:20px;
				background-color: #FFF;
				background-image: url('/public/images/header-background.gif');
				background-repeat: repeat-x;
				background-position: bottom
			}
			#logo
			{
				height: 100px;
				background-image: url('/public/images/header.jpg');
				background-repeat: no-repeat
			}
			#content
			{
			}
			#leftcontent
			{
				float:left;
				width:67%;
				margin:10px;
				padding:30px 30px 70px 30px;
				border: 1px solid #000;
				background-color: #33251C
			}
			#leftcontent h1
			{
				color: #936FC4
			}
			#leftcontent h2
			{
				color: #FFF
			}
			#rightcontent
			{
				margin:15px
			}
			p, pre
			{
				margin:0px 30px 10px 30px
			}
			#rightcontent p
			{
				font-size:10px;
				margin-left:0px
			}
			#navcontainer
			{
				margin: 0;
				padding: 0;
				height: 22px;
				font: 11px Verdana, sans-serif;
				width: 100%;
				border-top: 1px solid #bbb;
				border-bottom: 1px solid #bbb;
				list-style-type: none;
				background: #FFF
			}
			#navlist li
			{
				float: left;
				margin: 0;
				padding: 0;
				width: auto;
				display: block
			}
			#navlist li a, #navlist li a:link
			{
				background: #FFF;
				color: #555;
				text-decoration: none;
				padding: 3px 5px 3px 5px;
				display: block
			}
			#navlist li a#current, #navlist li a#current:link
			{
				color: #000;
				cursor: default;
				font-weight: bold;
				border-bottom: 3px solid #f90;
				background: #EEE
			}
			#navlist li a#current:hover
			{
				border-bottom: 3px solid #999;
				background: #DDD
			}
			#content {
				padding: 10px;
				background-color: #ff8080;
			}
			#footer {
				position: absolute;  /* Needed for Safari */
				padding: 10px;
				background-color: #aa3939;
				width: 75%;
			}
			#footer h1 {
				padding-bottom: 0;
			}
			h1, p {
				margin: 0;
				padding-bottom: 1em;
			}
			h1 {
				font-size: 12px;
				line-height: 1.5em;
			}
        -->
        </style>
		<script type="text/javascript">
		<!--
		function getWindowHeight() {
			var windowHeight = 0;
			if (typeof(window.innerHeight) == 'number') {
				windowHeight = window.innerHeight;
			}
			else {
				if (document.documentElement && document.documentElement.clientHeight) {
					windowHeight = document.documentElement.clientHeight;
				}
				else {
					if (document.body && document.body.clientHeight) {
						windowHeight = document.body.clientHeight;
					}
				}
			}
			return windowHeight;
		}
		function setFooter() {
			if (document.getElementById) {
				var windowHeight = getWindowHeight();
				if (windowHeight > 0) {
					var contentHeight = document.getElementById('content').offsetHeight;
					var footerElement = document.getElementById('footer');
					var footerHeight  = footerElement.offsetHeight;
					if (windowHeight - (contentHeight + footerHeight) >= 0) {
						footerElement.style.position = 'absolute';
						footerElement.style.top = (windowHeight - footerHeight) + 'px';
					}
					else {
						footerElement.style.position = 'static';
					}
				}
			}
		}
		window.onload = function() {
			setFooter();
		}
		window.onresize = function() {
			setFooter();
		}
		//-->
		</script></head><body>
		<div id="content">
			<div id="head">
				<div id="logo">
				</div>
			</div>
			<div id="navcontainer">
				<ul id="navlist">
				<li><a href="/">home</a></li><li><a href="/mix/" id="current">mixes</a></li><li><a href="/gallery/">gallery</a></li><li><a href="/contact/">contact</a></li></ul>
	
			</div><br/>
			<div id="leftcontent">
				<h1>My Mixes</h1>
				<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
			</div>
			<div id="rightcontent">
				right side
			</div>
		</div>
		<div style="position: absolute; top: 810px;" id="footer">
			<h1>Footer</h1>
		</div>
	</body>
</html>

how may i fix it?
thanx!

Positioning A Navigation Bar At The Bottom

Similar Tutorials

View Content

On a 3 column page I left the center column completely empty because I am using a non-scrolling, centered image as background and I want it persistently visible, though the 2 marginal columns are welcome to scroll.

My problem arises when I try to put my navigation bar at the bottom of the page. It insists upon occupying the empty center column and rising to the top of it (though it gets itself truncated to the width of the center column).

I don't want it there; I want it a bit below the longer of the two (populated) marginal columns and centered on the page.

This is my first attempt with CSS for page layout and I am using the template from glish.

Positioning A Table On The Bottom Of The Screen

Similar Tutorials

View Content

I am trying to set a table to sit on the bottom of the browser at all times, like a hovered BG image. Anyone know how to do this?

I've tried this but I obliviously don't know what i'm doing

#grass
{
position:absolute;
bottom:100%
background-repeat: no-repeat;
background-position: 0px -0px;
}

(it's a landscaping website, i want grass on the bottom on the screen)

Border Line Only On Bottom And Nav Positioning Issue

Similar Tutorials

View Content

I'm trying to put a 1px line on the bottom of my header that spans the width all the way. I've used border-bottom: 1px and border-style: solid; but I still have a looks like 3px border all the way around my header.

Also I have my unordered list inside of my header div and it's placed directly below my header.

Any help much appreciated, just learning how to layout.

http://imgbin.org/index.php?page=image&id=6637

CSS code
Code:

body { 	
	font-family: "Lucida Sans Unicode", sans-serif, Verdana; 
	
	background-color: #999999; 
}

#header {
	
	height: 75px; 
	width: 100%; 
	
	border: 0px 0px 1px 0px; 
	border-style: solid;  
	border-color: white; 
	background-color: #336699; 
}	

#container {
	margin: 0 auto; 
	width: 900px;
	height: 100%;  
	
	background-color: #666666;  
}

#content {
	width: 75%; 
}

#sidebar {
	width: 25%; 	
	
	background-color: #666666; 	
}

ul {
 
	list-style-type: none; 
	
}

li {
	display: inline;	
}

and

HTML
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
	<head>
		<title>Jeremy</title>
		<link href="default.css" rel="stylesheet" type="text/css" />	
	</head>
	
	<body>
		<div id="header">
			<h1 class="header">Jeremy</h1>
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="portfolio.html">Portfolio</a></li>
				<li><a href="forums.html">Forums</a></li>
				<li><a href="contactme.html">Contact Me</a></li>			
			</ul>
		</div>	
		
		<div id="container">
			<div id="sidebar">
			
			</div>		
			
			<div id="content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor dui sit amet diam molestie cursus. Vivamus a sapien sed nunc fermentum feugiat. Donec iaculis neque sit amet tortor consectetur eu lacinia est commodo. Ut lobortis fermentum felis, eu tristique elit fermentum sed. Etiam pulvinar commodo est non vestibulum. Aenean sed ante in velit vulputate tristique. Duis lacinia eleifend massa, sed volutpat dolor malesuada at. Nam convallis consequat mauris imperdiet rutrum. Aenean vitae vestibulum libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum lorem nulla, pellentesque vitae porttitor condimentum, dignissim a libero. In quis turpis orci, vitae faucibus risus. Duis tincidunt, libero tincidunt hendrerit viverra, felis lectus rutrum diam, et dictum mauris ipsum nec purus.</p>
				<p>Vivamus ut nunc vitae eros fermentum pretium. Nunc molestie odio vitae magna consectetur quis ultricies purus adipiscing. Curabitur ante nisl, scelerisque a consequat sed, rhoncus at turpis. Morbi blandit ante eu tellus facilisis eu semper enim auctor. Nunc sollicitudin orci nunc, vitae accumsan risus. Etiam nec est in ipsum iaculis varius. Nam enim velit, imperdiet viverra condimentum vitae, egestas eget dolor. Nullam facilisis condimentum diam, in euismod lorem mattis a. Mauris vel nulla et ipsum venenatis aliquam vitae a nibh. Nunc commodo ullamcorper odio vitae fermentum. Praesent faucibus blandit condimentum. Integer sed justo nulla. Praesent id gravida dui. Proin malesuada interdum scelerisque. Sed condimentum justo nec metus venenatis accumsan.</p>
			</div>		
		
		</div>
	
	</body>
</html>

Positioning Elements Inside Cells (top Left Bottom Right)

Similar Tutorials

View Content

Running The Bottom Of The Page Off The Page

Similar Tutorials

View Content

Hey guys. You can run an image, a border, text, whatever you want off the top of the page, but can you do it with the bottom of the page.

Code:

.top {
	position: relative;
	left: 0px;
	top: -75px;
  }

That will of course run an image off the top of the page, but

Code:

.bottom {
	position: relative;
	left: 0px;
	bottom: -250px;
  }

this line of code will simply but the image relative to the top image and it's completely visible, meaning the user can view the entire image simply by scrolling down. I'm placing my <id>'s in tables right now, but I'm open to whatever. I simply want an image consistently, running off the top of the page and the bottom of the page at all times. Any ideas? Thanks in advance.

Css Positioning - Footer Positioning Problem

Similar Tutorials

View Content

I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values):

It needs to be sticked to fit after content of 4 column DIV's like it is in example.

http://www.split.info/dev/less-content/
http://www.split.info/dev/more-content/

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF;  top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966;  position: absolute;  top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
	<div id="contentPane">Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
	</div>
	<div id="leftPane">Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
	</div>
	<div id="rightPane">Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
	</div>
	<div id="rightPane2">Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
	</div>
</div>
<div id="headwide">
	<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>

Content from above 4 column div's need to push footer DIV below (after them)!

Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns).

Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer...

So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx!

Echo

Bottom Of Page With Div

Similar Tutorials

View Content

Using mysql and php I gather data belonging to different people and I put together one page for each person. The bottom of each page has a different footer: Quote:
<div id="footer">Data...</div>

The declaration of style is Quote:
<style type="text/css">
#footer {
position: fixed;
width: 100%;
height: 180px;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
</style>
The problem is that each page has the same information shown at the bottom. However if I check the source code it shows different data for each bottom of page.

Help!

Css For A Div To Go Bottom Of Page

Similar Tutorials

View Content

Bar At Bottom Of Page When Using Css Gradient

Similar Tutorials

View Content

I'm using CSS to create a gradient, and all is well except for the bottom of the page:

http://www.area51entertainment.co/gradient_problem.png

For some reason it's placing a red bar at the bottom of the gradient. Any ideas why?

http://www.area51entertainment.co/index.php

EDIT: Fixed using the following:

Code:

background-repeat: no-repeat;
background-attachment: fixed;

Aligning From The Bottom Of A Page?

Similar Tutorials

View Content

Is there a way to align something from the bottom of the page?

Css -- Div -- Can't Get Footer To Go To The Bottom Of The Page

Similar Tutorials

View Content

http://wdcb.org/newsite/

Having some difficulty here in putting the footer at the bottom of the page. I've looked at dozens of help tools, and none of them work. I'm obviously missing something.

Page code:
Code:

<html>  
	<body>
		
			<div id="header">
				<?php include('includes/menu_new.inc'); ?>
			</div>
			
				<div id="leftcol">
					<div class="element">
						<img alt="" src="../images/buttons/PledgeNow.jpg">
						<p>This is what text underneath would look like.  I know that some of our boxes on the right side can do this so we want to make sure it looks right.</p>
					</div>
					
					<div class="element">
						<b>PLEDGE NOW</b>
					</div>
		
					<div class="element">
						<b>PLEDGE NOW</b>
					</div>
				</div>
			
				<div id="content">Content Section dfsdf dfdf fsdf dfsdf sdfsd ghh ghgh hghtr ytgdf gfdfgdf </div>
			
				<div id="rightcol">
					<div class="element">
						<a href="http://iRockJazz.com/" target="_blank"><img alt="" border=0 src="../images/ads/iRJ_wdcb_tile_199pix.jpg"></a>
					</div>
				
					<div class="element">
						<img alt="" src="../images/mini-headers/MiniHeader-FolkRoots.jpg" width="200">
						<p>
							Our days may be dedicated to jazz, but during the evenings it's all about the folk! WDCB plays more folk and acoustic roots music than any other station in Northern Illinois.
							<br><br>
							<a href="programming/progfolkroot.php">Click here</a> to learn more.
						</p>
					</div>
				</div>
			
			<div id="footer">
				<?php include('includes/footer.inc'); ?>
			</div>
				
	</body>  
</html>

CSS code:
Code:

#header {
position: absolute;
top: 5px;
left: 5px;
width: 1000px;
height: 182px;
}

#leftcol {
background: #f00;
position: absolute;
top: 187px;
left: 0px;
width: 235px;
}

#leftcol .element {
	margin-bottom:15px;
}

#leftcol p {
	margin-left:5px;
}

#content {
background: #ccc;
position: absolute;
top: 187px;
left: 250px;
width: 540px;
}

#rightcol {
background: #f00;
position: absolute;
top: 187px;
left: 800px;
width: 200px;
}

#rightcol .element {
	margin-bottom:15px;
}

#rightcol p {
	margin-left:5px;
}

#footer {
   position:fixed;
   bottom:0px;
   width:1000px;
   height:100px;
   background:#005288;
}

Thank you in advance for your help.

Forcing Div To Bottom Of The Page Help

Similar Tutorials

View Content

i tried searching for this and wasn't able to find any threads.

i have a container div with my content, and then i have a footer div that i want to always be at the bottom of the page. i've got it to work in FireFox, but IE is a pain as usual. can anyone look at this and tell me if i'm doing it right and/or what i'm doing wrong? thx.

css
Code:

#container {min-height: 87%; width:620px; margin: 30px auto; position:relative; text-align: center; clear: both; background-image: url(images/backgroundCol.gif); background-repeat: repeat-y;}

#container_footer { margin:auto; height:50px; width:620px; text-align:center; background:#FF0000; clear:both; position:relative; margin-top: -80px; clear: both; background-image: url(images/footerBackground.gif); background-repeat: repeat-y;}

html
Code:

<div id="container">
container
<br class="clearall" />
</div>

<div id="container_footer">		
			this is the footer		
	<br class="clearall" />
</div>

here is the page in action so far
http://www.photography139.com/index.html

Padding At Top And Bottom Of Page

Similar Tutorials

View Content

Hi all,

I am in the early stages of developing a new website and really cant understand why there is a space between the browser window and the container div.

Here is the code I have used:

html, body {
padding: 0;
margin: 0;
background-color: #D3D3D3;
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 14px;
color: #000000;
}

#page-container {
margin-top: 0;
margin-left: auto;
margin-right: auto;
padding: 0;
background-image:url('back.jpg');
background-repeat:repeat-y;
text-align: center;
width: 800px;
}

I have tried all sorts of variations but nothing will get the page-contaner div to go flush with the top and bottom of the browser window! (I have used this code many times before and it always works, even sites I have stored locally on my machine using this look fine?!?!?)

Any help would be greatly appreciated!

Rich

Moving Links To The Bottom Of Page But Still Want Them To Appear At Top

Similar Tutorials

View Content

ok basically this is an accessibility thing, i dont want users (disabled) to read the links first page after page and i have read that i can place the links at the bottom but style them with css so they appear on top.

i am trying to do something like this but my page just gets messed up if i move the links to below.
page layout:
Code:

<div> //overall
   <div>//top>
   <div>side Links/menu
   <div>contents
   <div>footer

Keep Footer At Bottom Of Page In Firefox 3.6.6

Similar Tutorials

View Content

Hello everyone

I have a problem with keeping a footer at the bottom of a page. It hovers over other elements in Firefox 3.6.6

Also I'd like to have the footer at the right side and not centered. If I define "right" however, part of it disappears in IE.

The style sheet is no from me.

I would appreciate, if someone were kind enough to have a look and help me. Thanks in advance for any input

Eva

Here it is:

/***********************************************/
/* 3col_leftNav.css */
/* Use with template 3col_leftNav.html */
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/

body{
background-image: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/head6.png);
background-repeat: no-repeat;
background-position: left top;
font: 13px Verdana, Arial, Helvetica, sans-serif;
/* size: 100%; */
color: #333333;
line-height: 1.3;
margin: 0px;
padding: 0px;
}

img{
border: 0;
}

a{
color: #006699;
text-decoration: none;
}

a:link{
color: #006699;
text-decoration: none;
}

a:visited{
color: #006699;
text-decoration: none;
}

a:hover{
color: #006699;
text-decoration: underline;
font-weight: bold;
}

h1{
font-family: Verdana,Arial,sans-serif;
font-size: 114%;
color: black;
margin: 0px;
padding: 0px;
}

h2{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: black;
margin: 0px;
padding: 0px;
}

h3{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: black;
margin: 0px;
padding: 0px;
}

h4{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
font-weight: normal;
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: #334d55;
margin: 0px;
padding: 0px;
}

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

label{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: bold;
color: #334d55;
}

table{
padding: 5 px;
}

/***********************************************/
/* Layout Divs */
/***********************************************/

#masterhead{
padding: 30px 0px 0px 0px;
/* border-bottom: 1px solid #cccccc; */
width: 950px;
}

#navBar{
float: left;
width: 195px;
margin: 0px;
/* 19.08.2008 padding-top: -5px;*/
padding-top: -5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
/* background-color: #e4f2f9; */
/* 19.08.2008 border-right: 1px solid #cccccc; */
}

#headlines{
position: absolute;
left: 690px;
top: 135px;
font-size: 85%!important;
/* font-size: 90%; */
/* float:right; */
width: 230px;
margin-top: -30px;
/* border-left: 1px solid #cccccc; */
/* border-bottom: 1px solid #cccccc;*/
/* padding-right: 10px; */
}

#headlines h3{
margin-top: 3px;
margin-bottom: 3px;
margin-left: 10px;
padding-top: 1px;
padding-bottom: 1px;
font-weight: 900;
}

#content{
float: left;
padding-left: 24px;
width: 460px;
font-size: 107%;
line-height: 1.4;
/* position: absolute;
top: 184px;
left: 210px; */
}

#content h1,h2 {
margin: 0px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 0px;
font-size: 130%;
font-color: black;
}

#content h3 {
margin: 0px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 0px;
font-size: 120%;
font-height: 90%;
font-weight: 900;
}

/***********************************************/
/* Components */
/***********************************************/

#siteName{
margin: 0;
padding-top: 0px;
padding-right: 0;
padding-bottom: 0;
padding-left: 200px;
/* font-size: x-large; */
color: #FF9900;
}

/************* #globalNav styles **************/

#globalNav{
/* border-bottom: 1px solid #CCC; */
color: #006699;
text-align: center;
/* font-weight: bold; */
margin-top: 40px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 10px;
/* 19.08.2008 border-top: 1px solid #cccccc; */
}

#globalNav img{
display: block;
}

#globalNav a {
/* font-size: 120%; */
padding: 0 4px 0 0;
}

/*************** #pageName styles **************/

/*
#pageName{
margin: 0px;
padding-top: 30px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 20px;
}
*/

/************* #breadCrumb styles *************/

#breadCrumb{
font-size: 80%;
padding: 2px 0px 0 10px;
}

/************** .feature styles ***************/

.feature{
padding: 2px 2px 10px 10px;
font-size: 80%;
}

.feature h3{
padding: 30px 0px 5px 0px;
text-align: center;
color: #006699;
}

.feature img{
float: left;
padding: 10px 10px 0px 0px;
}

/************** .story styles *****************/

.story{
clear: both;
font-size: 80%;
padding-top: -40px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

.story p{
padding: 0px 0px 10px 0px;
}

/************* #siteInfo styles ***************/

#siteInfo{
font-size: 75%;
color: #cccccc;
padding: 10px 10px 10px 10px;
text-align: right;
border-top: 0px none #cccccc;
/* border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc; */

}

#siteInfo img{
padding: 4px 4px 4px 10px;
vertical-align: middle;
}

/************* #search styles ***************/

#search{
padding: 5px 0px 5px 10px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}

#search form{
margin: 0px;
padding: 0px;
}

#search label{
display: block;
margin: 0px;
padding: 0px;
}

/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}

/*********** #sectionLinks styles ***********/

#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
/* border-bottom: 1px solid #006699; */
font-size: 90%;
}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
}

#sectionLinks a {
display: block;
/* border-top: 1px solid #006699; */
padding: 2px 0px 2px 10px;
}

#sectionLinks a:hover{
/* background-color: #dddddd;*/
}

.navigate {
overflow: hidden;
width: 204px;
padding-bottom: 1px;
}

/**Navigation Menu **/
.navigate ul, .navigate li {
list-style: none;
margin: 0px 0px!important;
padding: 0px 0px!important;
line-height: 1.5em;
}

/**erste Navigationseben**/
.navigate li.current span, .navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active {
display: block;
border: 0;
border-bottom: 1px solid #86c2e3;
border-top: 1px solid #fff;
border-right: 1px solid #86c2e3;
width: 100%;
text-decoration: none;
margin: 0;
padding: 5px 5px 5px 15px;
font-size: 1.0em;
font-weight: bold;
}

.navigate[class] li.current span, .navigate[class] li a, .navigate[class] li a:link, .navigate[class] li a:visited, .navigate[class] li a:hover, .navigate[class] li a:focus, .navigate[class] li a:active {
width: auto;
}

.navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active {
background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_0.png) #e4f2f9 no-repeat 0px 0px;
padding: 5px 5px 5px 15px;
color: #000;
font-weight: bold;
}

.navigate li a:hover, .navigate li a:focus, .navigate li a:active {
background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_1.png) #e4f2f9 no-repeat 0px 0px;
}

.navigate li.current span, .navigate li.current a, .navigate li.current a:link, .navigate li.current a:visited, .navigate li.current a:hover, .navigate li.current a:focus, .navigate li.current a:active {
background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px;
color: #000;
}

.navigate li.current a.current, .navigate li.current a.current:link, .navigate li.current a.current:visited, .navigate li.current a.current:hover, .navigate li.current a.current:focus, .navigate li.current a.current:active {
background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px;
color: #000;
}

/*********** .relatedLinks styles ***********/

.relatedLinks{
position: relative;
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a:link,
.relatedLinks a:visited {
display: block;
}

/************** #advert styles **************/

#advert{
padding: 30px 0px 10px;
}

#advert img{
display: block;
}

/************** #headlines styles **************/

#headlines{
margin: 0px;
padding: 10px 0px 20px 10px;
}

#headlines p{
padding: 5px 0px 5px 0px;
}

/**Footer**/
#footer {
clear: both;
position: relative;
border-top: 4px solid #CCECF4;
font-size: 11px;
padding: 4px 4px 8px 10px;
margin-top: 4px;
bottom:0;
zoom: 1;
}

#footer .left {
float: left;
width: 700px;
bottom:0;
}

#footer .right {
float: right;
width: 150px;
text-align: right;
margin-top: -2.3em;
zoom: 1;
position: relative;
z-index: 0;
bottom:0;
}

#footer p {
color: #000 !important;
padding: 0;
margin: 0;
bottom:0;
}

#footer a, #footer a:link, #footer a:visited, #footer a:hover, #footer a:focus, #footer a:active {
color: #306479;
text-decoration: none;
font-weight: bold;
}

#footer a:hover, #footer a:focus {
text-decoration: underline;
}

#navispalte {
font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 202px;
float: left;
}