10 replies [Last post]
kevinwasie
kevinwasie's picture
Offline
Regular
cleveland ohio
Last seen: 13 years 5 weeks ago
cleveland ohio
Joined: 2008-10-15
Posts: 16
Points: 0

Hello-
I am having difficulty getting my 3 column layout to fill the whole height of a page. I want the 3 columns to always be at least 100% of height (min-height:100%), and if there is more content placed in the center column, then I want the columns to expand and fill the newly available height.

This is my first site in css (opposed to tables), and I really like it. It is so much more effective. I cannot wait to get this to work right!

Any assistance would be greatly appreciated!

The full page can be viewed at suetirrell.com

Current problems with css:
FIREFOX:
1) The left and right columns do not even appear.
2) The center column does not fill 100% when there is not enough content in center column

INTERNET EXPLORER:
1) The left and right columns appear, but they are only like 100pixels at the top of the page.
2) The center column does not fill 100% when there is not enough content in center column
3) There is about a 30pixel gap between the bottom of page and columns - i think it is caused by 'clear' class

Here is an image of my structure:

http://suetirrell.com/css.gif

Below is the HTML 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>
<title></title>
</head>
<body>
<div id="container"> 
  	<div id="left"> </div>
 	 <div id="center"> 
  		<div id="content">
		</div>
  </div>
  <div id="right"> </div>
  <div class="clear"></div>
</div>
</body>
</html>

Below is the css:
(I have only included the classes that are relevant to the layout. There is more to the css file like h1, p, etc.)

*{
	height:auto;
	min-height:100%;
}
 
html {
	height:auto;
	min-height:100%;
	}
 
body {
	background-image: url(../images/main/background.jpg);
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
	height:auto;
	min-height:100%;
}
 
#container{
	height:auto;
	min-height:100%;
	width: 679px;
	margin: 0;
	border: 0;
	padding:0;
	margin-left: auto;
	margin-right: auto;
	}
 
#left{
	float: left;
	width: 15px;
	margin: 0;
	padding: 0;
	background-color: #7ABDBA;
	height:auto;
	min-height:100%;
	}
 
#center{
	height:auto;
	min-height:100%;
	float:left;
	width: 647px;
	max-width: 647px;
	border-left: 1px solid black;
	border-right: 1px solid black;
	background-color: #F9F3E5;
	padding: 0;
	margin: 0;
	}
 
#right{
	float: LEFT;
	width: 15px;
	margin: 0;
	padding: 0;
	background-color: #7ABDBA;
	height:auto;
	min-height:100%;
	}
 
#content{
	width: 100%;
	max-width: 100%;
	padding: 25px;
	margin: 0;
	height:auto;
	}
 
.clear{
	clear:both;
	height:0;
	line-height:0;
	overflow:hidden;
	}

Triumph (not verified)
Anonymous's picture
Guru

I looked at your link but I

I looked at your link but I am only seeing one column. What is going in the right and left column?

kevinwasie
kevinwasie's picture
Offline
Regular
cleveland ohio
Last seen: 13 years 5 weeks ago
cleveland ohio
Joined: 2008-10-15
Posts: 16
Points: 0

RE: only one column

:bigoops:

kevinwasie
kevinwasie's picture
Offline
Regular
cleveland ohio
Last seen: 13 years 5 weeks ago
cleveland ohio
Joined: 2008-10-15
Posts: 16
Points: 0

RE: only one column

That is one of the problems Smile ... I believe that I have it coded correctly (obviously is haven't) for 3 columns, but only 1 is showing up (in firefox), 3 of them show up in IE, but 2 of them are like 150 pixels at the top.

The right and left columns are 15px blue bars, like a border. But i could not figure out a way to use border, because I want an actual black border around the center column, and then i want 15px of blue background.

Triumph (not verified)
Anonymous's picture
Guru

If there is no content in a

If there is no content in a column then it isn't a column and shouldn't be represented in the markup at all. Using markup to create borders or empty space is a throwback to tables based layout.

kevinwasie
kevinwasie's picture
Offline
Regular
cleveland ohio
Last seen: 13 years 5 weeks ago
cleveland ohio
Joined: 2008-10-15
Posts: 16
Points: 0

Triumph wrote:If there is no

Triumph wrote:

If there is no content in a column then it isn't a column and shouldn't be represented in the markup at all. Using markup to create borders or empty space is a throwback to tables based layout.

Hmm that makes sense. How would I go about creating the blue border around the column, as well as the 1px black border? Thanks for your help.

Triumph (not verified)
Anonymous's picture
Guru

Background image on either

Background image on either the body or a wrapper.

kevinwasie
kevinwasie's picture
Offline
Regular
cleveland ohio
Last seen: 13 years 5 weeks ago
cleveland ohio
Joined: 2008-10-15
Posts: 16
Points: 0

followup

Triumph wrote:

Background image on either the body or a wrapper.

Thanks. That cuts out a significant amount of useless code. I have that working now, but I am still unable to get the height to work correctly. Is there some type of hack that is needed to make it fill the whole height?

I have the following css now:

html {
	height:auto;
	min-height:100%;
	}
 
body {
	height:auto;
	min-height:100%;
	background-image: url(../images/main/background.jpg);
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
	text-align:center;
}
 
#content {
	height:auto;
	min-height:100%;
	width: 100%;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #000000;
	border-left-color: #000000;
	background-color: #F9F3E5;
}
 
#wrapper {
	height:auto;
	min-height:100%;
	width: 550px;
	background-color: #7ABDBA;
	padding-right:15px;
	padding-left:15px;
	margin-left: auto;
	margin-right: auto;
}

HTML is as follows:

	<div id="wrapper">
		<div id="content">this is some content in the content div</div>
	</div>

Again, I want it to fill 100% of the height even if there is not enough content.

page can be seen at http://suetirrell.com/testcss.html

Thanks for all of your help!

Triumph (not verified)
Anonymous's picture
Guru

First step is to put in a

First step is to put in a proper doctype.

kevinwasie
kevinwasie's picture
Offline
Regular
cleveland ohio
Last seen: 13 years 5 weeks ago
cleveland ohio
Joined: 2008-10-15
Posts: 16
Points: 0

Sorry about that. I missed

Sorry about that. I missed copying it over form the other site.

Done.

I have been searching for reason why min height does not work on google,yahoo, but came up short.

Triumph (not verified)
Anonymous's picture
Guru

Edited post above as you

I don't honestly remember how to make 100% height work as it's never really struck me as a necessary thing but try this:

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
 
 
 
 
html {
	height: 100%;
	}
 
body {
	min-height:100%;
	height:100%;
	background-image: url(<a href="http://suetirrell.com/images/main/background.jpg" rel="nofollow">http://suetirrell.com/images/main/background.jpg</a>);
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
	text-align:center;
}
 
#content {
	height:auto;
	min-height:100%;
	width: 100%;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #000000;
	border-left-color: #000000;
	background-color: #F9F3E5;
}
 
#wrapper {
	height:100%;
	min-height:100%;
	width: 550px;
	background-color: #7ABDBA;
	padding-right:15px;
	padding-left:15px;
	margin-left: auto;
	margin-right: auto;
}
 
-->
</style>
</head>
 
<body>
	<div id="wrapper">
		<div id="content">this is some content in the content div</div>
	</div>
</body>
</html>

Not sure if it works as you'd expect. Please test before deployment.