[SOLVED] Column Height Problem

Warptweet · August 17, 2007

I'm testing a design for my website right now and I'm perfectly okay with it, except for one thing.

www.warptweet.com/developzone

You'll notice that the right navigation bar and the content box don't have equal heights. I've been told of a method using faux columns, but despite spending hours trying to understand them, and even interpreting examples themselves using the same layout shapes, I have no clue how these faux columns truly work.

I'm wondering if somebody is willing to turn me specifically in the right direction, and tell me what code to put where in my css.style sheet. I've always had a problem with this, as I don't know which part of my style sheet to put the code in, what code, It's very confusing. I'd really love any help.

The path to my 1x1 pixel image is "images/fpfaux.jpg"

My Code:

* {
margin: 0;
padding: 0;
}


body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 95%;
background: #F1F1F1;
}


#container {
margin: 10px auto;
width: 747px;
}


#header {
height: 97px;
background: url(http://www.warptweet.com/developzone/images/fpheader.jpg);
}


#faux {
margin-bottom: 10px;
overflow: auto;
width: 100%
}


#header h1 {
text-indent: -2000px;
}


/* TOP NAVIGATION */
#nav-top {
padding: 3px;
background: #6CAF2F;
}


#nav-top li {
display: inline;
margin-left: 15px;
}


#nav-top li a:link,
#nav-top li a:visited {
color: black;
font-size: 120%;
text-decoration: none;
}


/* RIGHT NAVIGATION */
#right {
background: #B2D95E;
padding: 10px;
min-width: 125px;
}


#right li {
display: block;
text-indent: 10px;
}


/* CONTENT */
#content {
background-color: #ffffff;
padding: 10px;
width: 75%;
min-height: 600px;
float: left;
}


#content p {
margin-bottom: 15px;
}


A:link {
text-decoration: none; color: black;
}
A:visited {
text-decoration: none; color: black;
}
A:active {
text-decoration: none; color: black;
}
A:hover {
text-decoration: underline; color: black;
}

Here is my HTML page 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" lang="en">

<head>

<meta http-equiv="content-type" content="text-html; charset=utf-8" />
<title>Home - Warptweet.com</title>
<link rel='stylesheet' href='style.css' type='text/css' />


</head>

<body>

<div id='container'>
<div id='header'>
	<h1>Home - Warptweet.com</h1>
</div>

<div id='nav-top'>
	<ul>
		<li><a href='?cmd=index'>Home</a></li>
		<li><a href='?cmd=flashportal'>Flash Portal</a></li>
		<li><a href='?cmd=contact'>Contact Us</a></li>
		<li><a href='?cmd=submit'>Submit Content</a></li>
	</ul>
</div>

<div id='faux'>

<div id='content'>
	<p>

text here text here etc. etc.

                          <p>
</div>

<div id='right'>
	<center>
		<img src="images/fpnoicon.jpg" alt="Ninja Stars" />
	<ul>
		<li><a href='#'>Ninja Stars</a></li>
	</ul>
	</center>


</div>
</div>
</div>

</body>
</html>

Again, I'd appreciate any help or any tips I can get. Thanks.

tarun · August 17, 2007

Just Define The Height

Right:

#right {
background: #B2D95E;
padding: 10px;
min-width: 125px;
height: 500px;
}

Content:

#content {
background-color: #ffffff;
padding: 10px;
width: 75%;
min-height: 600px;
float: left;
height: 500px;
}

calabiyau · August 17, 2007

EDIT: JUST HAD ANOTHER LOOK. I ASSUMED YOU WERE TALKING ABOUT EQUAL HEIGHT COLUMNS THAT AUTOMATICALLY TAKE UP THE FULL HEIGHT OF THE BROWSER AND EXPAND IF CONTENT IS LONGER. IF THAT IS NOT THE CASE...IGNORE ALL BELOW

I think in your case you would put the background image within your container div. But it would not be a 1px x 1px image. It would be as wide as your container div and 1px high. So in photoshop or whatever create a new image the width of your container, with the color of your left column taking up the width of your left column and same for right column. Then in your css within the container portion

#container
{
width: 750px //or whatever your width is
background: url(faux_column_bg.gif);
background-repeat: repeat-y;
height: 100%;
}

You will also have to give your html and body a height 100%, for internet explorer 6 to work so:

Within your css file

html
{
height: 100%;
}
body
{
height: 100%;
}

If your content will sometimes be longer then a full screen then you will need a further hack for Firefox and IE7, and give your container that has the repeating background image the ability to expand

html>body #container {min-height: 100%; height: auto;}

Should work across all browsers that way. The code i've given is stuff to add to whatever you already have.

dbrimlow · August 17, 2007

Calabiyau, that will not work.

A background image in css will not act to force width, height like it does in a table cell ... it will just disappear and the box will resize to whatever value it has been told to.

Auto Equal height boxes in css is not possible (for cross-browsers). You can get it to work in real browsers (FF, Safari, Opera), but it will not work in any flavor of IE.

see http://www.456bereastreet.com/archive/200406/equal_height_boxes_with_css_part_ii/ for a fix for the real browsers.

The one solution I always use is exactly what tarun said ... designate the height. BUT! Remember to include your margins, paddings and borders of any element in one box to another.

What I do for "dynamically generated" data where I have no control over the amount of data being input (like in a database), is create a fixed height for the boxes and have php generate a "more" link.

Unfortunately, this is one area of the cross-browser standards where IE simply cannot be forced to behave ... period. No hacks can make any IE auto-generate equal height boxes if there is no data of equal height.

Dave

calabiyau · August 17, 2007

Maybe we are not talking about the same thing but it does work. I just tested in IE 6 and Firefox, presumably IE 7, now having the html>body and correct application of expanding heights of containers will follow suit but I stand to be corrected on that one. Try it, make a faux column bg with 200px left and 500px right. Fills the screen when content is less than full screen and expands when content is longer than full screen.

html {height: 100%; }

body {height: 100%;color: white;margin: 0; padding: 0;}

#container {

width: 700px;
height: 100%;
background: url(column-bg.gif);
background-repeat: repeat-y;
}

html>body #container {min-height: 100%; height: auto;}

#left {width: 200px;float: left;}

#right {width: 500px; float: left;}

<div id="container">
<div id="left">
</div>
<div id="right">
</div>
<div style="clear: left;"></div>
</div>

dbrimlow · August 17, 2007

We are talking about different things.

We are talking about two side by side boxes. Each with a red border and yellow background.

Let's say the left has 10 lines of text, the right has 7 lines of text.

The two boxes will not stay equal heights unless they are provided with a fixed height setting.

Unlike in a one row, two column table, where the right will auto stretch to equal the left regardless of the content.

Here is an example - try this code in both Firefox and IE 6.0 (I never looked at it in IE 7).

In Firefox you will see three equal height boxes with varying amounts of text in each.

In IE, you will see one big box containing three unequal height boxes of the text:

or, here is a direct link to he following page look at it in FF and IE 6

http://www.456bereastreet.com/lab/equal_height_ii/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Equal height boxes with CSS, part II | Lab | 456 Berea Street</title>
<style type="text/css" media="screen,print">
/* Layout rules */
.equal {
	display:table;
	border-collapse:separate;
}
.row {
	display:table-row;
}
.row div {
	display:table-cell;
}

/* Styling rules to make the example look nicer */
html,body {
	margin:0;
	padding:0;
	color:#000;
	background:#fff;
}
body {
	font:76%/140% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
}
.equal {
	margin:10px auto;
	border-spacing:10px;
	background:#898B60;
	width:600px;
}
.row div {
	background:#fff;
}
.row .one {
	width:200px;
}
.row .two {
	width:200px;
}
.row .three {
	vertical-align:middle;
}
.row div h2 {
	margin:0 0 0.5em 0;
	padding:0.5em 10px;
	font-size:1.2em;
	color:#fff;
	background:#595B30;
}
.row div p {
	font-size:0.94em;
	margin:0.5em 0;
	padding:0 10px;
}
#labfooter {
	text-align:center;
	clear:both;
}
</style>
<!-- Some rules to make IE/Win display the boxes with variable height. -->
<!--[if IE]>
<style type="text/css" media="all">
.equal, .row {
display:block;
}
.row {
padding:10px;
}
.row div {
display:block;
float:left;
margin:0;
}
.row .two {
margin-left:10px;
}
.row .three {
width:160px;
float:right;
}
.ieclearer {
float:none;
clear:both;
height:0;
padding:0;
font-size: 2px;
line-height:0;
}
</style>
<![endif]-->

</head>
<body>
<div class="equal">
<div class="row">

	<div class="one">
		<h2>This is a box</h2>
		<p>This box has less content than the one next to it, but both boxes will still have equal height. No background-image trickery.</p>
	</div>
	<div class="two">
        	<h2>This is another box</h2>
		<p>This box has more content than the others. If all boxes were table cells, the cell with the most content would decide the height of all cells. It works like that here too, but this is not a table.</p>

		<p>Instead, display:table, display:table-row and display:table-cell are used to make divs behave like table cells. Excellent. Too bad it doesn’t work in you-know-which-browser. It does, however, work in modern browsers like Mozilla, Opera, Safari, Firefox, OmniWeb, Camino, and Netscape. IE gets alternate CSS rules to prevent it from destroying the layout completely.</p>
		<p>Read the related blog entry for more info: <a href="/archive/200406/equal_height_boxes_with_css_part_ii/">Equal height boxes with CSS, part II</a>.</p>
	</div>
	<div class="three">
		<p>This box has even less content. Anything in it is vertically centered.</p>
	</div>

	<!--[if IE]>
	<div class="ieclearer"></div>
	<![endif]-->
</div>
</div>
</body>
</html>

Now this was the FIXED for IE version! It uses the "display:table" command.

IE still can't bring itself to show the boxes equally, however.

Here is the mess it looks like in IE WITHOUT the display:table and ie hacks - check this out in FF then IE 6:

http://www.456bereastreet.com/lab/equal_height/

calabiyau · August 18, 2007

Okay I jumped the gun in assuming it was equal height, expandable columns that OP was talking about. However even with it being two boxes side by side, the OP's website, the boxes don't have borders or anything fancy, it is just two blocks of color side by side. So why wouldn't the code below work? It works for two simple boxes in IE 6 and Firefox and is dead simple, as long as OP doesn't need to do anything crazy. Not trying to be argumentative, just curious. Seems to work in this case at least.

body {margin: 0; padding: 0; color: white;}

#container {

width: 700px;

background: url(column-bg.gif);
background-repeat: repeat-y;
}



#left {width: 200px;float: left;}

#right {width: 500px; float: left;}


</style>

</head>


<body>

<div id="container">
<div id="left">
</div>
<div id="right">
</div>
<div style="clear: left;"></div>
</div>

</body>
</html>

Sign In

[SOLVED] Column Height Problem

Recommended Posts

Warptweet

Link to comment

Share on other sites

tarun

Link to comment

Share on other sites

calabiyau

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

calabiyau

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

calabiyau

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information