CSS - Sidebar And Main Content Height Help

I am using this:

http://bonrouge.com/3c-hf-fluid.php

At that code stands the #main div starts off at minimum height and expands with content. The #clearfooter div stops it covering the footer when it expands.

However. I need the #main div to start off filling the gap between the header and footer rather than it being an expanding element. The reason is that I need a background to cover the area between #header and #footer.

I have run out of ideas on how to accomplish this. The CSS I have created so far is:

PHP Code:
 html {
    height: 100%;
}

body {
    margin: 0; 
    padding: 0; 
    height: 100%;
    background-image: url(../images/2500px_height_bg.gif);
    font-family: Verdana, Arial, 'Times New Roman', Serif;
    text-align: center;
}

#wrap {
    min-height: 100%;
}

* html #wrap {
    height:100%;
} 

#contain_header {
    height: 20px;
    text-align: center;
    padding: 0;
}

#header {
    margin:0 auto;
    width: 760px;
    height: 20px;
    background-image: url(../images/header_bg.gif);
    line-height: 20px;
    vertical-align: center;
}

#clearfooter {
    clear: both;
    height: 21px;
    overflow: hidden;
    background-color: red;
}

#contain_footer {
    height: 21px;
    background-image: url(../images/contain_footer_bg.gif);
    background-repeat: repeat-x;
    margin-top: -21px;
    text-align: center;
    padding: 0;
} 

#footer {
    margin:0 auto;
    width: 760px;
    height: 21px;
    background-image: url(../images/footer_bg.gif);
    line-height: 21px;
    vertical-align: center;
    z-index: 1000;
}

#wrap_content {
    position: absolute;
    width: 100%;
    min-height: 100%;
    margin-top: -21px;
    padding-bottom: 31px;
    padding-top: 20px;
    background-color: transparent;

}

* html #wrap_content {
    height: 100%;
}

#main {
    position: relative;
    top: 0px;
    left: 0px;
    height: 100%;
    background-color: white;
} 

* html #main {
    height: 1px;
} 





Any suggestions welcome

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!

I need to center the contents of two divs in one of my sidebars. The page can be seen he http://dev.asbco.com

I need to center the free quote image and also the tabbed section beneath it.

Any help is greatly appreciated as I'm trying to launch this site by the end of the week.

Thanks!

Hello,

I've found many threads on making your sidebar appear as if it is growing with tiling backgrounds, but my situation is a tad more unique. My project can be found he
http://tinyurl.com/ygq22wa

If you are on the home page and click "About Us", the content behaves as I want it. The problem is, I want the sidebar to grow with the content, but only underneath the links. I want the bolts image to always be at the lower left of the page, and the "middle" of the sidebar to grow (so that the links stay put, but the sidebar grows underneath to match the content div). That way, I won't have undesired empty space next to the content when the page grows more than the min-height I have defined for the sidebar.

I've seen some Javascript solutions, but I really would like to accomplish this with CSS.

Big thanks to anyone who can help.

I am presently creating a website for a friend of mine who's a model and wants her own website, I have decided to make it using xhtml and css.
The problem that I am having is that I would like to have a footer which is at the very end of the page no matter how much content there is to the page.
I have uploaded the code to here

When this page is viewed in IE the footer is displayed at the bottom of the screen although the content carries on after the footer.
When this page is viewed in Firefox the footer is displayed just below the bottom of the screen although again the content carries on after the footer.

I have Googled this and tried out a couple of the suggested ways of getting the page to work and it just doesn't appear to want to work, so I am obviously doing something wrong :s

Does anyone have any idea how I would be able to get the footer to stay at the very bottom of the webpage?

Also if you look at the website you will see that the navigation sidebar only goes down as far as its content, I would prefer it if the sidebar went down to the footer (which will hopefully be at the bottom of the webpage).

Again does anyone have any idea how I would be able to get it to do this.

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!

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;
}

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/

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

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!

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.

Hello all,
On a friend's site: tincansingingtelegram dot com/who-are-we
the horizontal sidebar keeps appearing. It doesn't appear on the homepage, but on all the subpages. Thanks for any help!

In my css I have the following to set up the height and width of the page to 100%:
Code:

html, body {
	font-family: verdana, arial, sans-serif;
	color: #000000;
	background-color: #E1E1E1;
	margin: 0;
	width: 100%;
	height: 100%;
	text-align: center;
}

For my website I have the following layout:
Code:

<body>
<div id="container">
    <div id="header"></div>
    <div id="menu"></div>
    <div id="main"></div>
    <div id="footer"></div>
</div>
</body>

How do I get the <div id="main"></div> to fill in the remainder of the window height, without setting its height to 100% and them causing scroll bars and throwing the footer off the page.

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.