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

I'm in the middle of learning CSS and have come along alright for the most part. I have two small questions though.

1) The page I'm working on is http://www.mcconaha.com/csscenter.php. It's a three-column layout, with div boxes holding various links down the right and left sides of articles that will be posted. There is a main div that all of this sits in, and that expands just fine to whatever amount of content the article may have. But if the article were to have just a samll amount of content, the div wouldn't expand to the minimum height established by the link boxes on the right and left. How do I make that happen? I just need the light grey box to expand down to the lowest point on the page.

2) Notice the small box with the yellow border in the middle. I want this to be a copyright footer, but have a similar problem. How do I make that box appear 10px below whatever the lowest point for the main div is?

Basically, I need the nav boxes to push everything down. I HOPE this can be done fluidly, so I can simply add and remove boxes quickly without needing a CSS edit...that's the goal anyway...modular nav boxes.

My CSS is at http://www.mcconaha.com/csscenter.css
and the page is at http://www.mcconaha.com/csscenter.php

(Also note that this is really all I'm asking. I'm going to clean up the rest...just roughing it out right now.)

Anyway, thanks in advance.

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

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!

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.

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

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!

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/

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.

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!...

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.

I have a css menu navigation that I'm having problems with. I don't know why the menu bar is being pushed about 40px to the left. I want it to go further left. The total size of the menu bar is 960px.

Please help me out...

Thanks,

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Easy Living by Lisa Marie- Professional Organization and Design</title>
 
		<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
	<body>
	<div id="wrapper">
		<div id="content">
			<div id="header">
				<img src="images/logo.jpg" alt="easy living by lisa marie- organizing your life so you can enjoy it" width="554" height="197" />
 
				<ul id="nav">
					<li id="home"><a href="index.html">Home</a></li>
					<li id="lisa"><a href="about.html">About Lisa Marie</a></li>
					<li id="services"><a href="services.html">Services</a></li>
					<li id="benefits"><a href="benefits.html">Benefits</a></li>
					<li id="testimonials"><a href="testimonials.html">Testimonials</a></li>
					<li id="contact"><a href="contact.php">Contact</a></li>
				</ul><!--end of nav-->
 
			</div><!--end of header-->
 
			<div id="slideshow">
				<img src="images/slide1.jpg" alt="" class="active" />
				<img src="images/slide2.jpg" alt="" />
				<img src="images/slide3.jpg" alt="" />
				<img src="images/slide4.jpg" alt="" />
				<img src="images/slide5.jpg" alt="" />
				<img src="images/slide6.jpg" alt="" />
			</div><!--end of slideshow-->
	</div><!--end of content-->
	</div><!--end of wrapper-->
	</body>
 
</html>

Here is the CSS styling...

Code:

body {
	background-image: url(../images/background.jpg);
	margin: auto;
	}
 
#wrapper {
	width: 1054px;
	background-color: #ffffff;
	color: #000000;
	border: 1px white;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	margin-bottom: 30px;
	padding-bottom: 20px;	
	}
 
h1 {
	font-family:"Apple Chancery", Serif;
	font-weight: normal;
	font-size: 32px;
	text-align: left;
	color: #60b6d7;
	}
 
h2 {
	font-family:"Apple Chancery", Serif;
	font-weight: normal;
	font-size: 26px;
	text-align: center;
	color: white;
	}
 
h3 {
	font-family:"Apple Chancery", Serif;
	font-weight: normal;
	font-size: 28px;
	text-align: left;
	color: #60b6d7;
	}
 
h4 {
	font-family:"Apple Chancery", Serif;
	font-weight: normal;
	font-size: 20px;
	text-align: left;
	color: #000000;
	}	
 
#header {
	text-align: center;
	}
 
#nav {
	height: 50px;
	width: 960px;
	background-color: #60b6d7;
	margin: auto;
	list-style: none;
	display: block;
	overflow: hidden;
}
 
#nav li {
	margin-top: 10px;
	float: left;
	width: 160px;
	}
 
#nav li a:link {
	color: white;
	font-family: "Apple Chancery", Serif;
	font-size: 25px;
	text-decoration: none;
	height: 50px;
}
 
#nav li a:hover {
	color: black;
	font-family: "Apple Chancery", Serif;
	font-size: 25px;
	text-decoration: none;	
	height: 50px;
}
 
#nav li a:visited {
	color: black;
	font-family: "Apple Chancery", Serif;
	font-size: 25px;
	height: 50px;
}

Have a look at this and tell me what's causing the navigation not to align.
http://n.1asphost.com/wheelofgod/se...t/spokelist.asp