Learn VBA & Macros in 1 Week!

CSS - Getting The Main Content Of A Page To Span Top-to-bottom

Full Excel VBA Course - Beginner to Expert

Getting The Main Content Of A Page To Span Top-to-bottom	View Content

Hello - I'm having trouble with the layout of a site I'm working on. Here's the site in question:

http://www.americanidiotsband.com/

If you look at it in anything up to 1024x768, it's fine. But if you go higher than that (say, 1280x1024 resolution), then the main (black) part of the page goes only as far down as the content that is filling it. What SHOULD happen is that the black background should span all the way to the bottom, no matter how much content is inside it...

Here is a link to the stylesheet that I made up:

http://www.americanidiotsband.com/styles.css

I'm sure I'm doing something wrong, and I'm hoping that someone could help me correct this. Thanks in advance for any help that can be offered!...

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Span Tag - Isolate From The Main Stylesheet

Containers Extending To The Bottom Of Page/content

Content Part Of Website In Ie Is At The Bottom Of Page!?

Page Bottom Content Obscured In Firefox

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

Content-resizing Main Div

Main Content Top Image Problem

Main Div Wont Extend With Content

Footer Won't Move With Main Content

Sidebar And Main Content Height Help

In Ie6 My Main Content Div Is Broken Out Of The Layout

Help! How To Make Div Part Of Main Content?

Main Content Column Help Needed

Css Main Content Area Not Showing Up The Same Ie Vs. Firefox

Sticky Footer Hiding Main Content Background

Stretching A Left Navigation Div According To Height Of Main (right) Content Div

Align Content In Div To The Bottom

Content Getting Clipped At Bottom - Please Help!

Position A Div At The Bottom Of Content.

Ie 7 Pushes Content To Bottom

Learn VBA & Macros for Excel in 1 Week!

Span Tag - Isolate From The Main Stylesheet

Similar Tutorials

Hi,

This is probably an easy question, but I can't seem to find the answer.

I have website created and linked to a stylesheet that controls the way all my links display. On one page I have a link that I want to display differently. So I am using the span tag. Now I have the color correct, just not sure how I put in the active link and visited link within the span tag, etc...

Heres what I have done so far.

<a href="index.html"><span style="color : white; ">Index Page</span></a>

Hope someone can help.
Thanks

Containers Extending To The Bottom Of Page/content

Similar Tutorials

Content Part Of Website In Ie Is At The Bottom Of Page!?

Similar Tutorials

hi,

I am fairly new to css and working on a website with a complete css layout for the first time, one I got from dreamweaver. I thought things were going great because I did all my testing in Firefox (like a good boy) but then I tried to test it in Internet Explorer 6 and alot if not all of my webpages have the text positioned at the bottom instead of the top of a page.

Here is a link:
http://www.jcstrategies.com/jeff/featured_listings.php

CSS CODE
-----------------------------------------------------------
/***********************************************/
/* emx_nav_left.css */
/* Use with template Halo_leftNav.html */
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
background: #cccccc url(./images/bg_grad.jpg) fixed;
}

/******* hyperlink and anchor tag styles *******/

a:link, a:visited{
color: #005FA9;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

/************** header tag styles **************/

h1{
font: bold 120% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

h2{
font: bold 114% Arial,sans-serif;
color: #006699;
margin: 0px;
padding: 0px;
}

h3{
font: bold 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

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

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

/*************** list tag styles ***************/

ul{
list-style-type: square;
}

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

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

/********* form and related tag styles *********/

form {
margin: 0;
padding: 0;
}

label{
font: bold 1em Arial,sans-serif;
color: #334d55;
}

input{
font-family: Arial,sans-serif;
}

/***********************************************/
/* Layout Divs */
/***********************************************/
#pagecell1{
position:absolute;
top: 112px;
left: 2%;
right: 2%;
width:95.6%;
background-color: #ffffff;
}

#tl {
position:absolute;
top: -1px;
left: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}

#tr {
position:absolute;
top: -1px;
right: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}

#masthead{
position: absolute;
top: 0px;
left: 2%;
right: 2%;
width:95.6%;

}

#pageNav{
float: left;
width:178px;
padding: 0px;
background-color: #F5f7f7;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
font: small Verdana,sans-serif;
}

#content{
padding: 5px 10px 5px 5px;
margin:0px 0px 0px 179px;
border-left: 1px solid #ccd2d2;
}

/***********************************************/
/* Component Divs */
/***********************************************/
#siteName{
margin: 0px;
padding: 16px 0px 8px 0px;
color: #ffffff;
font-weight: normal;
}

/************** utility styles *****************/

#utility{
font: 75% Verdana,sans-serif;
position: absolute;
top: 16px;
right: 0px;
color: #919999;
}

#utility a{
color: #ffffff;
}

#utility a:hover{
text-decoration: underline;
}

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

#pageName{
padding: 0px 0px 14px 10px;
margin: 0px;
border-bottom:1px solid #ccd2d2;
}

#pageName h2{
font: bold 175% Arial,sans-serif;
color: #000000;
margin:0px;
padding: 0px;
}

#pageName img{
position: absolute;
top: 0px;
right: 6px;
padding: 0px;
margin: 0px;
}

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

#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
background-image: url(./images/glbnav_background.gif);
}

#globalNav img{
margin-bottom: -4px;

}

#gnl {
position: absolute;
top: 0px;
left:0px;
}

#gnr {
position: absolute;
top: 0px;
right:0px;
}

#globalLink{
position: absolute;
top: 6px;
height: 22px;
min-width: 640px;
padding: 0px;
margin: 0px;
left: 10px;
z-index: 100;
}

a.glink, a.glink:visited{
font-size: small;
color: #000000;
font-weight: bold;
margin: 0px;
padding: 2px 5px 4px 5px;
border-right: 1px solid #8FB8BC;
}

a.glink:hover{
background-image: url(./images/glblnav_selected.gif);
text-decoration: none;
}

.skipLinks {display: none;}

/************ subglobalNav styles **************/

.subglobalNav{
position: absolute;
top: 84px;
left: 0px;
/*width: 100%;*/
min-width: 640px;
height: 20px;
padding: 0px 0px 0px 10px;
visibility: hidden;
color: #ffffff;
}

.subglobalNav a:link, .subglobalNav a:visited {
font-size: 80%;
color: #ffffff;
}

.subglobalNav a:hover{
color: #cccccc;
}

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

#search{
position: absolute;
top: 5px;
right: 10px;
z-index: 101;
}

#search input{
font-size: 70%;
margin: 0px 0px 0px 10px;
}

#search a:link, #search a:visited {
font-size: 80%;
font-weight: bold;

}

#search a:hover{
margin: 0px;
}

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

#breadCrumb{
padding: 5px 0px 5px 10px;
font: small Verdana,sans-serif;
color: #AAAAAA;
}

#breadCrumb a{
color: #AAAAAA;
}

#breadCrumb a:hover{
color: #005FA9;
text-decoration: underline;
}

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

.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
min-height: 200px;
height: 200px;
}
html>body .feature {height: auto;}

.feature h3{
font: bold 175% Arial,sans-serif;
color: #000000;
padding: 30px 0px 5px 0px;
}

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

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

.story {
padding: 10px 0px 0px 10px;
font-size: 80%;
}

.story h3{
font: bold 125% Arial,sans-serif;
color: #000000;
}

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

.story a.capsule{
font: bold 1em Arial,sans-serif;
color: #005FA9;
display:block;
padding-bottom: 5px;
}

.story a.capsule:hover{
text-decoration: underline;
}

td.storyLeft{
padding-right: 12px;
}

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

#siteInfo{
clear: both;
border-top: 1px solid #cccccc;
font-size: small;
color: #cccccc;
padding: 10px 10px 10px 10px;
margin-top: 0px;
}

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

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

#sectionLinks{
margin: 0px;
padding: 0px;

}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
border-bottom: 1px solid #cccccc;
}

#sectionLinks a:link, #sectionLinks a:visited {
display: block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
background-image: url(./images/bg_nav.jpg);
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #21536A;
}

#sectionLinks a:hover{
border-top: 1px solid #cccccc;
background-color: #DDEEFF;
background-image: none;
font-weight: bold;
text-decoration: none;
}

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

.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
border-bottom: 1px solid #cccccc;
}

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

.relatedLinks a{
display: block;
}

/************* relatedLinks2 styles **************/

.relatedLinks2{
margin: 0px;
padding: 10px 0px 10px 1px;
border-bottom: 1px solid #cccccc;
}

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

.relatedLinks a{
display: block;
}

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

#advert{
padding: 10px;
}

#advert img{
display: block;
}

/********************* end **********************/

ANY IDEAS????

Page Bottom Content Obscured In Firefox

Similar Tutorials

Hi all,
this is my first post and hope I get help in a hear-tearing problem that I face at this link: (URL address blocked : See forum rules)

ie show the complete page fine but firefox obscure the bottom content, no need for more explanation since it is obvious from looking at the page, I have the same problem when page content get much long as in the above link.
any help would be greatly appreciated.
sorry for my bad english

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

Similar Tutorials

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.

Content-resizing Main Div

Similar Tutorials

I have tried multiple times to have a kind of "content" div, where it resizes vertically to the amount of content in it, and stays the same width and is centered. How can I do this? I know min-height doesn't work in IE. Another problem I was having, certain pages would be off to the left when they should have been centered. Please help!

Main Content Top Image Problem

Similar Tutorials

Hi All.. I am working on my first real website for a friend and I am having trouble getting the top image where I want it. I will post a link in a sec. What I am trying to do is set a top, middle and bottom image in the Main Content part of the site. It looks like a picture frame but can expand without breaking when I add new content. I had no problem putting the middle image in and I finally got the bottom image set, though I had to do some strange things to get it to work. Now I am stuck on the top image. I can not get it set where I want it. I am still learning CSS/HTML and am trying to do this on my own and with Google . but this has me stumped. Could someone tell me what I should do. Here is the link

http://http://www.jamkastin.com/New..._Dreams/dd.html

Here is my CSS that I did for the middle and bottom image.

Code:

<style type="text/css">

#html, body {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  width:800px;
  height: 100%;
  background: url(images/bg.png);
  margin: 0 auto;
  text-align: center;
	font-family:  Verdana, Helvetica, sans-serif;
  } 

#container { 
	width: 780px;
	background:  url(images/wood_back.jpg);
	margin: 0 auto; 
	overflow: hidden;
} 

#navigation {
		margin-top: -4px;
		width:780px;
		background: #B6C5A4;
		font-family:Trebuchet MS, Helvetica, sans-serif;
		text-align:center;
		overflow:hidden;
	}

#navigation ul {
	
		float:left;
		list-style:none;
		margin: 0;
		padding:0;
		position:relative;
		left:50%;
		text-align:center;
	}
	#navigation ul li {
		display:block;
		float:left;
		list-style:none;
		margin:0;
		padding:0px;
		position:relative;
		right:50%;
	}
	
	#navigation ul li a {
		display:block;
		margin:0;
		padding:.4em .8em;
		color:#000;
		text-decoration:none;
		
	}
	#navigation ul li a span {
		display:block;
	}
	#navigation ul li.active a {
	color: #fff;
		font-weight:bold;
	}
	#navigation ul li a:hover {
	color: #fff;
	}

#mainContent { 
float: left; 
width: 450px;
margin: 15px 15px -71px 15px;
	padding: 15px 15px 15px 15px;
background:url(mainbg.gif) repeat-y;
}

#mainContent .p3{
padding-bottom:20px;
margin-left: -21px;
background:url(mainbottom.gif) bottom no-repeat;
}

#sidebar1 {
	float: right;
	width: 200px; 
	padding: 15px;
	margin: 15px;
background:url(sidebg.gif) repeat-y;
}

p {
padding: 0px 20px 0px 20px;	
}

#mainContent .article
    {
    padding-top:20px;  
    }
	
.bottom_border {
width: 780px;
height:30px;
margin: 0px 10px;
background-image: url(images/dd_border.png);
}

.copy {
	font-size: 12px;
	color: #000;
}

.copy a {
	color: #000;
}

Main Div Wont Extend With Content

Similar Tutorials

I've been trying for days to get this to work and nothing i do makes this stupid page extend with the content that i put in. If anyone has any idea's as to why and could point me in the right direction i would very much appreciate it. The link to the site is below, thank you in advance.

hxxp://adrian.briansykes.netau.net/

Footer Won't Move With Main Content

Similar Tutorials

Sidebar And Main Content Height Help

Similar Tutorials

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

In Ie6 My Main Content Div Is Broken Out Of The Layout

Similar Tutorials

So I'm trying to debug some major issues in IE6. In both my "Home" page and in my "Bio and Press" page my mainbody div and my mainbodyalt div are broken out of the three column laaout and the two column layout and pushed to the bottom of the other div columns.

I am stumped as to why this is doing this, may I have some help on the subject please.

Here is the link:
http://www.lonniebruhn.com/sitelab/index.html

Both pages validate

Thank you
LB

Help! How To Make Div Part Of Main Content?

Similar Tutorials

Quick nagging question that's been bothering me for some time. Fortunately, I have a link to explain the problem.

If you go to our web page (link below), you will see that we have a DIV section on the left side of the page which displays a mini You Tube video, along with a few other buttons:

http://bit.ly/gL9sA8

The problem is that when you shrink the window, that particular div will shy away outside the bounds of the browser window. Is there anyway to not have it disappear, but at the same time, not have the main content overlap it in anyway.

In other words, how would you code the DIV tag so that the following two things happen:

1. It's always in view on the LEFT side of the webpage
2. The main DIV stops against it, and doesn't overlap it if resized

As you can see, if you shrink the size of the window, our main div area (div id: mainWrapper) is always going to be centered which is the most important thing. However, we want to have a left (or right) side area to display buttons like that.

Here is the current code for that left sided DIV column:

Code:

<div style="position:fixed; margin-left: -180px; top: 75px;">
// My html content for mini You Tube video & button is here
</div>

The problem is that if a person has a low resolution monitor, this left hand div is out of view and never seen.....or even worse, it's partially seen and not fully displayed because it's hiding outside the bounds of the window.

My goal: To have it fixed to either the outer LEFT or RIGHT side of the webpage, just along the edge of the mainWrapper as you see it now.

If I can clear anything up as to what I'm trying to explain, please let me know. I hope one of you awesome gurus can point me in the right direction!

Main Content Column Help Needed

Similar Tutorials

So far my site appears somewhat like this

Header

Menu

Main Content

Footer

Now what I wish to do for the Main Content, is create boxes, 2 top boxes and 2 lower boxes:

Box 1 Box 2
Box 3 Box 4

So I've been playing around, trying to get them to float, ya de da, I can manage to get 2 columns, but when I attempt to put in the 2 lower columns, the footer ghosts over top of all the main content and all you can see is the header, menu and footer.

If attempted to wrap them in container's but have failed miserably, any help would be appreciated.

Css Main Content Area Not Showing Up The Same Ie Vs. Firefox

Similar Tutorials

Here's the url

Template

Any comments on the code will be very helpfull. Even if it is out of topic.

In IE it looks pretty good. In firefox the border goes under the large image and the image navigation is left there naked on the body background.

Sticky Footer Hiding Main Content Background

Similar Tutorials

Hello,

I just joined the forum, I'm new to web design although I have some experience in video post production.

I'm attempting to create a layout for a website using sticky footer technique and an image for the border shadow in the main column.
The sticky footer works well until I tweak the css to add the background border image, then I get this empty space in the middle of the body where the border image background should be extending to.

It's probably a novice mistake but I can't get to find it. Your help would be much appreciated.
The HTML:

Code:

<body>

<div id="nonFooter">
		<div id="wrapShadow">
		<div id="header">
				<div id="linksHead"></div>
		<div id="mainMenu"></div>
		</div>		
			
		
		<div id="content">
<div id="bannerSlider">  (SWF file)
</div>
			<div id="contentBuscador">
			</div>
			<div id="contentTours">
			</div>
			<div id="contentElite">
			</div>
			<div id="contentTestimonios">
			</div>
			<div id="contentPromos">
			</div>
		</div>
	</div>
</div>
	<div id="footer">
		<div id="wrapShadowFooter">
		</div>
		</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
	</script>
</body>

The CSS:
Code:

html,body {
	padding: 0;
	margin: 0;
}

html
{
height: 100%;
}

body
{
height: 100%;
background-color: #3399cc;
}

#nonFooter
{
	position: relative;
	min-height: 100%;
	background-image: url(_images/shadow920x1ver3.gif);
	width: 920px;
	padding: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

* html #nonFooter
{
	height: 100%;
}

#content
{
	padding-bottom: 7em;
	width: 900px;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	clear: both;
	border-top-width: medium;
	border-top-style: solid;
	border-top-color: #336;
}
#header {
	width: 900px;
	height: 100px;
	position: relative;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
}
#footer
{
	position: relative;
	margin-top: -6em;
	height: auto;
	background-image: url(_images/shadow920x1ver3.gif);
	width: 920px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
} 
#wrapShadow {
	width: 920px;
	margin: 0px;
	padding: 0px;
	height: auto;
}
#wrapShadowFooter {
	width: 900px;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
	padding: 0px;
	background-image: url(_images/footerCruiseship.jpg);
	background-repeat: no-repeat;
	float: left;
	height: 100px;
}

All #content(area) Divs in content have the same code as this:
#contentBuscador {
	float: left;
	height: 100px;
	width: 880px;
	padding: 0px;
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 5px;
	margin-left: 10px;
}

Thank you,
pixelMason.

Edit: Problem Solved thanks to f_nietzsche

Stretching A Left Navigation Div According To Height Of Main (right) Content Div

Similar Tutorials

Hi,

I have a site with a left navigation bar (which is fixed width, and has a background colour that must stretch full screen from top to bottom of the page).

The site is:
http://67.18.220.222/~duoboots/2005/z.html

Stylesheet:
http://67.18.220.222/~duoboots/2005...s/style2005.css

As you can see, the left navigation menu stops once the content within the div is displayed. It does not stretch to the bottom of the screen. (say if you're on 1024 x 768 resolution)

Note: this varies according to the main (right) content. If the main content was shorter than the menu bar - it would work fine. The menu bar has a min-height of 100% which means the background applies to the size of your screen.

However, if the main content height is greater than that of the menu bar - then the menu bar will not adapt, but the background simply stops.

Is there a workaround for this? With tables, this could easily be achieved because the background colour of one cell is stretch until the end of the table, and not the content within the cell. However, I'd like to do this with CSS.

Here's some CSS:

Code:

body, p {

	color:#666666 ; 
	font-family: Verdana, Arial ; 
	font-size:7.5pt ; 
	font-weight:normal; 
}
body {
	height:100%;
	margin: 0px;
	background-color: #2F201E;
}

#container {  
 	width: 968px;
	height:100%;
}


#nav {
	width: 201px;
	border-right: 3px solid #FFFFFF;
	background: #8D603B;
	float: left;
	min-height:100%;
}

I've tried switching "min-height" and "height" but they don't seem to do what I want.... if anyone could help me out it would be MUCH appreciated!

Thanks a lot!

Align Content In Div To The Bottom

Similar Tutorials

So I have a 3-column layout in CSS and I'd like to have the content in the right-most column to be align to the bottom, like so:
Code:

| LEFT   |    MIDDLE       |          |
| (top)  |                 |          |
|        |                 |          |
|        |                 |          |
|        |                 |          |
|        |                 |          |
|        |                 | RIGHT    |
|        |                 | (bottom) |

Any idea how to do it? Thx!

Content Getting Clipped At Bottom - Please Help!

Similar Tutorials

Hello. I'm having an impossible time trying to get my page to behave properly. First, here's a link to the testing site:

http://www.tromadance.com/hoffman_test/index.php

The black left/right borders are supposed to go down to the bottom of the page (as long or short as that may be, depending on the content). Whichever is longer between the left side content or the right side content should be in charge of "stretching" the page. There is also a footer that should remain at the bottom, which is not even being shown...

I added borders to some of the divs to try to see what was going on. It looks like a mess, but I'm not sure what i am doing wrong!...

Here is the CSS, followed by the HTML...

CSS:
Code:

/* CSS Document */

html, body {
	background-color: #8A1410;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 0;
	color: #000;
	height: 100%;
}
p {
	font-size: .8em;
}

#container {
	background: #EC1D25;
	width: 800px;
	margin: auto;
	padding: 0px;
	text-align: left;
	border-left: 2px solid #000;
	border-right: 2px solid #000;
	overflow: hidden;
	height: 100%;
}

#header {
	background-color: #EC1D25;
	width: 800px;
	height: 177px;
	background: url(../images/header_top.jpg) top center no-repeat;
	margin-bottom: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
}

#nav {
	background-color: #000;
	color: #FFF;
	text-align: center;
	width: 100%;
	height: 50px;
}
#nav p {
	margin-top: 30px;
}

#sidebar {
	background-color: #EC1D25;
	width: 270px;
	min-height: 86px;
	float: left;
	margin-top: 20px;
	text-align: center;
	margin-left: 10px;
	border: 1px solid #999;
}
#donate {
	background-color: #000;
	width: 270px;
	height: 500px;
}

#maincontent {
	background-color: #7AD3F7;
	margin-top: 20px;
	margin-right: 10px;
	height: 100%;
	width: 500px;
	float: right;
	border: 1px solid #66F;
}

#spacer {
	clear: both;
	border: 1px solid #FF0;
}

#footer {
	font-size: .7em;
	text-align: center;
	height: 20px;
	margin-top: 10px;
}

HTML:
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TROMADANCE!</title>
<link href="includes/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
    <div id="header"></div>
    <div id="nav"><?php include("includes/nav.php") ?></div>
    <div id="sidebar">
        <object width="270" height="215"><param name="movie" value="http://www.youtube.com/v/zQR7sDpGegw&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zQR7sDpGegw&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="270" height="215"></embed>
        </object>
        Tromadance 10th Anniversary PSA
        <p>
        <div id="donate">
        </div>
        </p><br />
		<p>asdsadsa</p>
    </div>
    <div id="maincontent">
        	<p>SAMPLE TEXT</p>
    </div>
    <div id="spacer"></div>
	<div id="footer"><?php include("includes/footer.php") ?></div>
</div>
</body>
</html>

Thank you in advance for any help that can be offered!!!...

Position A Div At The Bottom Of Content.

Similar Tutorials

I want a footer that's at the bottom of the page.

If there isn't much content that means it should be at the bottom of the screen and there will be no scrollbars.

If there is tons of content then it should show after the content and only be visible if the user scrolls to the bottom of the page.

This code shows what I'm after and the problem I'm hitting.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>title</title>
		<style type="text/css">
			body, html	{margin: 0; padding: 0; height: 100%}

			#top		{background: red; position: absolute; top: 0px; left: 0px; height: 50px; right: 0px;}

			#content	{background: orange; margin: 50px 200px;}

			#leftNav	{position: absolute; left: 0px; top: 50px; bottom: 50px; width: 200px; background: yellow}

			#rightNav	{position: absolute; right: 0px; top: 50px; bottom: 50px; width: 200px; background: cyan}			

			#bottom		{background:green;  position: absolute; bottom: 0px; left: 0px; height: 50px; right: 0px;}
		</style>
	</head>
	<body>
		<div id="content">
			Content<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 /><br /><br /><br /><br /><br /><br />
		</div>
		<div id="leftNav">
			LeftCol
		</div>
		<div id="rightNav">
			rightNav
		</div>
		<div id="top">
			I'm at the top.
		</div>
		<div id="bottom">
			I'm at the bottom.		
		</div>
	</body>
</html>

Appreciate your thoughts.

Ie 7 Pushes Content To Bottom

Similar Tutorials

I now am fixing it with tables....
thanks for the forum!

[IMG]cater-express dot com/IE7.png[/IMG]

An image of IE7 and IE6 of my newly relaunched website - I actively have:
html,body {
text-align: center
}
#content {
width: 400px;
margin: 0 auto;
text-align: left
}
</style>
__________
it does not work...
please help bring content up to top in "content"

______
I wish I could just do all the cooking and not the coding!
Thanks for any help!