CSS - Position Footer At Bottom And Sidebar Height Problem

Hi, I have been having trouble fixing the coding on my site to be able to withhold the same content size while the window is being re-sized. Before I added

min-width: 800px

to my main content, it was being squeezed by the sidebar to force the letters/images to the left. Now with the code implemented, the sidebar reacts differently. It is being forced to the bottom as it meets the min-width of the content.

Site: Diablo 3 Kore - Please google it - [can't link yet]

CSS:

/* Content */
#fw-bigcontain {padding: 3px; min-width: 800px; float:right;}
#fw-columnContainer {}
#fw-mainColumn {margin: 0px;}
#fw-paragraph {}
.fw-paragraphtop {}
.fw-text {}
h3.fw-title {background: url(()) no-repeat scroll;color: white; font-size: 17pt; font-family: 'Clarendon Cn BT';}

/* Sidebar */

#fw-sidebar h3.fw-title {background: url(() no-repeat left center; font-size: 14px; margin-bottom: -8px; height: 13px;}
#fw-sidebar {min-width: 245px; float: right; background:black; padding: 7px;}
#fw-sidebar li {}
.hasSidebar #fw-sidebar .fw-title {font-size: 12pt; font-family: 'SonicCutThru Hv BT';}

/* end sidebars */

I haven't seen any css code I implemented that I could carry over to the sidebar code that could do the same thing. Well, please help me resolve this issue. Thank you.

Can someone help me with stopping the sidebar from overlapping the footer on jussbuss.tv singles category section, please help

I'm having trouble with my website structure... view this page for an example...

css is here...

The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page...

It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF...

how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF?

Thanks
Bryan

I'm a bit of a CSS newbie but I try.

How do you get the sidebars' height to synchronize with the height of your content? I tried height=100% but it doesn't seem to work. If I put a lot of text in my content, it stretches down but the sidebars remain the same height, making the layout looking ugly. I don't want to have to press enter in my sidebars to match the content's height all the time! Here's my code:


<style type="text/css">
#container {
width: 100%;
border: 1px solid gray;
margin: 0px auto;
}

#banner {
padding: 0px;
background-color: #CDC8F1;
}

#content {
padding: 5px;
background-color: #FFFFFF;
}

#sidebar-a {
float: left;
margin: 0;
padding: 0px;
background-color: rgb(235, 235, 235);
height: 100%;
}

#sidebar-b {
float: right;
margin: 0;
padding: 0px;
background-color: rgb(235, 235, 235);
height: 100%;
}

#footer {
clear: both;
padding: 5px;

background-color: rgb(213, 219, 225);
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>

This is my first completely css site and I am having troubles with my main content areas and some other small minor things.

My design requires that the sidebar be the same height as my content area. What do I need to do to get them the same heights. The main content area changes on each page so my sidebar needs to do the same.

Here is the website. I guess I cannot post url's so I hope I made sense.

Also an example of what the site is going to look is here. Once again cannot post urls.

Also, I need help with lists. In the example image I have the lists side-by-side. Normally I would use a table for this. Is there a way to do this with css?

Any help would greatly be appreciated.

Thanks,

Shaun

Hey guys, I was wondering if you could enlighten me on the right way to do this.

URL

On this CSS blog I'm designing for a friend, I'm trying to get the leafy sidebar to span the height of the content. My CSS for the property is:

#sidebar {
float: left;
background: #589f45 url(images/sidebar.gif) repeat-y;
height: 100%;
width: 44px;
}

I have a feeling that the height: 100% property is causing the problem. When you look at the site, the sidebar repeats exactly one page-length and stops.

The HTML markup for the page:

<div id="sidebar"></div>
<div id="header"></div>
<div id="topbar"></div>
<div id="blog">
Test<br />...
</div>
<div id="footer"></div>

All of the other IDs are floated left. Do you guys have any suggestions? Any help would be greatly appreciated. Thanks for looking!

Hello,

I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs).

My problem is:

- divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows.

Here is a html code:

Code:

<!--BEGIN TEMPLATE HEADER -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   	
<link href="template.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="template.js" />
</head>
<body onload="onloadprocedures()">
<div id="main_container">
	<div id="template_header">
		<div id="tl_outerborder"></div>
		<div id="t_outerborder"></div>
		<div id="tr_outerborder"></div>
		<div id="l_outerborder_h"></div>
		<div id="header_content">
			<div id="logo"><img src="img/logo.png" alt="" /></div>
			<div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div>
		</div>
		<div id="r_outerborder_h"></div>
	</div>
  
  <!-- END TEMPLATE HEADER -->
  <!-- BEGIN TEMPLATE BODY -->
	  <div id="template_body">
		<div id="l_outerborder_b"></div>
		<div id="body_content">
			<div id="body_content_text">
			  <p>TEST</p>
			</div>
		</div>
		<div id="r_outerborder_b"></div>
		
	  </div>
  <!-- END TEMPLATE BODY -->
  <!-- BEGIN TEMPLATE FOOTER -->
	<div id="template_footer">
		<div style="clear:both"></div>
		<div id="l_outerborder_f"></div>
		<div id="footer_content"></div>
		<div id="l_outerborder_f"></div>
		<div id="bl_outerborder"></div>
		<div id="b_outerborder"></div>
		<div id="br_outerborder"></div>
	</div>
</div>
</body>
</html>
<!-- END TEMPLATE FOOTER -->

and CSS:

Code:

@charset "utf-8";
/* CSS Document */
body {
	background-color:#FFFFFF;
	font-family:Tahoma, Verdana, "Times New Roman", Arial;
	font-size:12px;
}
a:link {text-decoration: none}      /* unvisited link */
a:visited {text-decoration: none}  /* visited link */
a:hover {text-decoration: none}  /* mouse over link */
a:active {text-decoration: none}  /* selected link */
#main_container {
	position:relative;
	margin:auto;
	width:960px;
	height:auto;
}
#template_header {
	float:left;
	position:relative;
	width:960px;
	height:300px;
}
#header_content {
	float:left;
	position:relative;
	width:900px;
	height:270px;
}
#logo {
	width:310px;
	height:130px;
	position:relative;
	float:left;
	top:0px;
	left:0px;
}
#slogan {
	width:580px;
	height:100px;
	position:relative;
	float:left;
	top:0px;
	left:0px;
}
#tl_outerborder {
	float:left;
	position:relative;	
	background-image:url(img/tl_outerborder.png);
	width:30px;
	height:30px;
}
#t_outerborder {
	float:left;
	position:relative;
	background-image:url(img/t_outerborder.png);
	width:900px;
	height:30px;
}
#tr_outerborder {
	float:left;
	position:relative;
	background-image:url(img/tr_outerborder.png);
	width:30px;
	height:30px;
}
#l_outerborder_h {
	float:left;
	position:relative;	
	background-image:url(img/l_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:270px;
}
#r_outerborder_h {
	float:right;
	position:relative;
	background-image:url(img/r_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:270px;
}
#body_content {
	float:left;
	position:relative;
	width:900px;
	
	overflow:hidden;
}
#body_content_text {
	float:left;
	position:relative;
	width:600px;
	
	margin: auto;
	overflow:hidden;
}
#l_outerborder_b {
	float:left;
	position:relative;	
	background-image:url(img/l_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:inherit;
}
#r_outerborder_b {
	float:right;
	position:relative;
	background-image:url(img/r_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:inherit;
}
#l_outerborder_f {
	float:left;
	position:relative;	
	background-image:url(img/l_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:inherit;
}
#r_outerborder_f {
	float:right;
	position:relative;
	background-image:url(img/r_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:inherit;
}
#template_body {
	float:left;
	position:relative;
	width:960px;
	
	overflow:hidden;
}
#bl_outerborder {
	float:left;
	position:relative;	
	background-image:url(img/bl_outerborder.png);
	width:30px;
	height:30px;
	
}
#b_outerborder {
	float:left;
	position:relative;
	background-image:url(img/b_outerborder.png);
	width:900px;
	height:30px;
}
#br_outerborder {
	float:left;
	position:relative;
	background-image:url(img/br_outerborder.png);
	width:30px;
	height:30px;
}

Thanks in advance for info how to stretch those doomed divs

EDIT: Here is layout concept.

URL
hTTp://qsrc.pl/layout.jpg

I'd like to make a 2-column layout where each column fills the height of the container div, and the container div's height is determined by the longest div within it... this is getting a bit confusing, because I can't have one being determined by the other one with that one being determined by the first, if that makes sense?

Any help would be greatly appreciated, thanks

Ok, I've taken many different approaches to this and I can't find a solution. I'm looking to make my footer align to the bottom of the browser window. For some reason I can't so I figured I'd post up my code here and get a different set of eyes to scan over it and help me out.

Here's the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<!--CSS-->
		<link rel="stylesheet" href="structure.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="print.css" type="text/css" media="screen" />
	
			<title> MY TITLE GOES HERE! </title>
		
	</head>
	
<body>

<div id="container">

        <div id="nav_container">

	MY MENU STUFF GOES HERE!

        </div>

<div id="content">

	<div id="left_column">
	
	BLAH BLAH all my content goes here!

	</div>
	
<div id="right_column">
	
ALL OF MY RIGHT CONTENT HERE!
			
</div>

</div>

<div id="footer"></div>

</div>

</body>

</html>

and this is the stylesheet driving the page:

Code:

body {
	background-image: url("gfx/bg.jpg");
	background-repeat: repeat-y;
	background-position: center;
	background-color: #FFFFFF;
	margin: 0px;
	font-family: Tahoma;
	font-size: 13px;
}



/*Page Structure --------------------------------------*/
#container {
	background-color: #FFFFFF;
	position: absolute;
	left: 50%;
	margin-left: -394px;
	width: 790px;
	height: 100%;
	border: 1px solid Black;
	border-top: 0px;
	border-bottom: 0px;
}

#content {
	background-color: #FFFFFF;
	width: 790px;
	float: left;
	margin: 0px;
	padding: 0px 0px 0px 0px;
}

#left_column {
	width: 390px;
	float: left;
	display: inline;
	margin: 15px 0 0 20px;
   padding: 0px 0px 15% 4px;
	border-right: 1px solid #DFDFDF;
}

#right_column {
	width: 326px;
	float: left;
	margin: 15px 0 0 0px;
   padding-bottom: 10%
}



/*Headers and Flash content -----------------------------*/
#header	{
	background-image: url("gfx/header.jpg");
	width: 790px;
	height: 101px;
	float: left;
	line-height: 1000px;
	overflow: hidden;
}

#home_header {
	background-image: url("gfx/home_header.jpg");
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	width: 380px;
	height: 150px;
	margin: 0px 0 10px 0px;
	float: left;
	line-height: 1000px;
	overflow: hidden;
}

#recent_posts	{
	background-image: url("gfx/recent_posts.jpg");
	background-repeat: no-repeat;
	width: 368px;
	height: 30px;
	margin-left: 3px;
	float: left;
	text-indent: -1000px;
	overflow: hidden;
}

#latest_threats	{
	background-image: url("gfx/latest_threats.jpg");
	background-repeat: no-repeat;
	width: 368px;
	height: 30px;
	margin: 25px 0 0 3px;
	float: left;
	text-indent: -1000px;
	overflow: hidden;
}

#recommended_sites	{
	background-image: url("gfx/recommended_sites.jpg");
	background-repeat: no-repeat;
	width: 215px;
	height: 30px;
	margin: 25px 0 0 3px;
	float: left;
	text-indent: -1000px;
	overflow: hidden;
}

#flash	{
	background-color: #000000;
	width: 790px;
	height: 120px;
	float: left;
	vertical-align: middle;
}



/*Navigation --------------------------*/
#nav_container	{
	background-image: url("gfx/nav_bg.jpg");
	background-color: #FFFFFF;
	width: 790px;
	height: 24px;
	float: left;
	text-align: right;
}


/*News Structure --------------------------*/
#news_header	{
	background-color: #FFFFFF;
	width: 390px;
	height: auto;
	float: left;
	font-size: large;
	font-weight: bold;
	color: #009AFF;
	margin: 3px 0 2px 0;
}

#news_post	{
	background-color: #FFFFFF;
	width: auto;
	height: auto;
	float: left;
	color: Gray;
	margin: 0px;
}

#news_date	{
	background-color: #FFFFFF;
	width: auto;
	height: auto;
	float: left;
	font-size: 11px;
	font-style: italic;
	color: Gray;
	margin-left: 5px;
}

#news_content	{
	background-color: #FFFFFF;
	width: 390px;
	float: left;
	margin-top: 20px;
}



/*Lists----------------------------------*/

#post_list {
	background-image: url("gfx/gradient.jpg");
	width: 371px;
	float: left;
	margin: 2px 0 0 0px;
	list-style-type: none;
	padding: 0px 0px 10px 0px;
}

#post_list li {
	background-color: transparent;
	padding: 5px;
	border-bottom: 1px solid #EDEEEE;
}

#threats_list {
	background-image: url("gfx/gradient.jpg");
	width: 371px;
	float: left;
	margin: 2px 0 0 0px;
	list-style-type: none;
	padding: 0px 0px 10px 0px;
}

#threats_list li {
	background-color: transparent;
	list-style-image: url("gfx/red_arrow2.jpg");
	list-style-position: inside;
	padding: 5px;
	border-bottom: 1px solid #EDEEEE;
}


/*Footer--------------------------------------------------*/
#footer {
	background-image: url("gfx/footer.jpg");
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	width: 790px;
	height: 125px;
	float: left;
	margin-top: 40px;
}

Any help or insight is greatly appreciated. I just made the jump to complete CSS layouts about 3 days ago so I'm still really new to this

Thanks in advance,
AA.

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.

Hi there, my first post here.

I'm working on my first site using CSS for layout. I have a footer as a div that I want to be the last thing on the page, doesn't need to stick to the bottom or anything. It's obeying on my other pages, but on this index page I can't figure out why its not going to the bottom.

the site is at w w w. montrosemusicseries com / indextest html

I'm assuming its some kind of float thing that's not clearing, but I have my <br style="clear:both"/> in there. I also tried a div clear to no avail. Any suggestions?


Thanks,

Stuart

I've attached a *.gif picture of how my site looks. It is completely coded in CSS. The footer just lies underneath the content, and I want to be able to move the footer to the bottom of the page. Below the sidebar.

Does anybody know how to do this?

Any help would be appreciated. Thank you!

I believe this has been asked before, but I'm unsure what search terms to use...

Basic one column CSS layout. How to keep the footer at the bottom of the window even when content doesn't reach that far?

I've been trying to implement a footer on the site I'm working on, and I want it to stay at the bottom of the page. If there's content that pushes down, I want the footer at the bottom of the content.

I've been trying to implement the method described by these two sites: http://www.sitepoint.com/forums/showpost.php?p=1239966&postcount=3
http://www.themaninblue.com/writing/perspective/2005/08/29/

but I'm having a hard time with the longer content page.

Here's two examples on the site I'm working on that I have up and nearly ready. Short page: http://windrivers-gsp.com/WRK/index.php
Long page: http://windrivers-gsp.com/WRK/hclub.php or
http://windrivers-gsp.com/WRK/dams.php

As you can see, the footer won't go to the bottom of the longer content on the long page, and I can't figure out why. I believe I've cleared everything, even implementing the PIE/Aslett clearfix on the container div.

I think I'm just to the point where I need some more experienced eyes to take a glance and point out where I must have missed something. Any help is greatly appreciated!

Oh, BTW, here's the addy for my CSS: http://windrivers-gsp.com/WRK/wrkCSS.css

And yes, I know there's a nasty hack in place currently for the navigation menu. I'm working on that after I get the footer problem fixed.