I am having a layout issue where if the contents of the left and right columns change, then the middle column increases or decreases in height.

LEFT COLUMN_______________RIGHT COLUMN
____________MIDDLE COLUMN_____________

I want the columns to be even across the top.

Thanks in advance!

Here is the style sheet code I am using.



a {
background: transparent;
color: #ff8f02;
text-decoration: none;
}

a:hover {
color: #fff;
}

body {
background: #550a04;
color: #d7cf00;
font-family: Verdana, Arial, Sans-serif;
font-size: 12px;
margin: 10px;
padding: 0;
}

form {
margin: 0;
}

h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}

hr {
background: #abc;
border: 0 none;
color: #abc;
height: 1px;
margin: 0;
padding: 0;
}

img {
border: 0 none;
}

p {
margin: 5px 0px 5px 0px;
padding: 0;
}

th,td {
padding: 2px;
}

div.leftColumn {
background: transparent;
border: 0px solid #555;
left: 10px;
padding: 5px;
position: absolute;
top: 400px;
width: 240px; /* Incorrect IE5 value */
z-index: 2;
voice-family: "\"}\"";
voice-family: inherit;
width: 218px;
}

html>body div.leftColumn {
width: 218px;
}

div.leftColumn2 {
background: transparent;
border: 0px solid #555;
left: 10px;
padding: 5px;
position: absolute;
top: 143px;
width: 240px; /*Incorrect IE5 value */
z-index: 2;
voice-family: "\"}\"";
voice-family: inherit;
width: 218px;
}

div.topColumn {
background: transparent;
border: 0px solid #555;
margin: 0px 200px 0px 130px;
min-width: 200px;
padding: 0px;
position: relative;
width: 600px;
z-index: 3;
}

div.middleColumn {
background: transparent;
border: 0px solid #555;
margin: 0px 200px 10px 240px;
min-width: 200px;
padding: 5px;
position: relative;
top: -105px;
width: 480px;
z-index: 3;
}

div.middleColumn2 {
background: transparent;
border: 0px solid #555;
top: 0px;
margin: 0px 200px 10px 240px;
min-width: 200px;
padding: 5px;
position: relative;
width: 480px;
z-index: 3;
}

div.rightColumn {
background: transparent;
border: 0px solid #555;
padding: 5px;
position: relative;
top: 43px;
margin: 0px 0px 0px 742px;
width: 240px; /* Incorrect IE5 value */
z-index: 1;
voice-family: "\"}\"";
voice-family: inherit;
width: 218px;
}

html>body div.rightColumn {
width: 218px;
}

div.logoBlock {
background: transparent;
border: 0px solid #555;
left: 10px;
margin: 0;
padding: 0;
position: absolute;
text-align: left;
top: 10px;
width: 210px; /* Incorrect IE5 value */
z-index: 2;
voice-family: "\"}\"";
voice-family: inherit;
width: 125px;
}

html>body div.logoBlock {
width: 188px;
}

div.copyrightBlock {
background: transparent;
margin: 0px 200px 0px 200px;
min-width: 200px;
padding: 0;
position: relative;
text-align: center;
width: 500px;
z-index: 3;
}

*.newItem {
color: #ff5500;
}

*.oldItem {
color: #fff;
}

It's going to be difficult to understand the problem without being able to see it. Can you post a link to a test page? New members cannot post direct links, but if you remove the www part, I think this is allowed/not considered a circumvention of the rules (I'm not 100% sure, so ask the helpdesk if you're also unsure).

Thanks for responding. The link is
eyeongames.com.

The way it is now is the way it is suppose to look, but say for instance, some text gets added to the right column to expand it by one line, the middle column shifts down.

I see what you mean. I resized the fonts on your page, and not only did it shove the middle column down, the positioning on the left caused your text to garble horribly.

I think you could save yourself a lot of headaches by simply not using positioning. For a basic three column layout, you really shouldn't need it at all. Instead, just float the right column to the right, float the left column to the left and set the middle column with margins to reflect the area used by the floated columns. You'll crush a number of potential browser bugs this way, and your CSS will be dramatically reduced in size. There may be some legacy browser issues with this, though I've found it works quite well on IE5/5.5 and IE for Mac, which are a couple big problems. Since you quite intelligently left out the XML parser (not needing it, I assume), you don't have to worry about many of IE's quirks mode issues.

As a side note, I would recommend having the middle column fluid. You have a lot of content there, and this is a prime example of a site that would benefit from giving visitors this type of control. If you choose to keep it fixed, you'll need to wrap your content in a container with the appropriate width to keep the floated columns where you want them to be.

Good luck!

Thanks for the help so far the_pm!

The problem I'm having when doing that is that the middle column headers and content change if you click on some of the links on the left and the html is in different tpl files. I've modified the GENU 2.1 news content management software and gotten past some of the issues, but this one has me stumped.

I did what you said and floated the left and right columns and made the middle column width auto, but that displayed the entire middle column below both the left and right columns.

Here is part of the code.

There are multiple index.tpl files with similar code only the content changes, such as when browsing the games.

header.tpl

<div class="logoBlock"><--- LOGO IMAGE ---></div>
<div class="topColumn"><--- BANNER IMAGE ---></div>
<div class="leftColumn">
<h3>{HEADER_BLOCK1_TITLE}</h3>
<hr />
<p><--- LINKS EDITED OUT ---></p>
<h3>{HEADER_BLOCK2_TITLE}</h3>
<hr />
<p><--- MORE LINKS ---></p>
<h3>{HEADER_BLOCK3_TITLE}</h3>
<hr />
<form><--- FORM CODE ---></form>
<h3>{HEADER_BLOCK4_TITLE}</h3>
<hr />
<p>{HEADER_BLOCK4_CONTENT}</p>
<!-- <hr />
<p>{BACKEND_RSS}</p>
<p>{BACKEND_TXT}</p> -->
</div>
<div class="rightColumn">
<table style="width: 100%;background: #d7cf00;">
<tr>
<td align="center"><h3><font color="#550a04">Game Updates</font></h3></td>
</tr>
</table>
<p align="center">{GAME_RSS}</p>
<!-- <p align="center">{GAME_TXT}</p> -->
</div>

footer.tpl

<div class="leftColumn2">
<table style="width: 100%;background: #d7cf00;">
<tr>
<td align="center"><h3><font color="#550a04">Latest News</font></h3></td>
</tr>
</table>
<p>{BACKEND_RSS}</p>
<!-- <p>{BACKEND_TXT}</p> -->
</div>
<div class="copyrightBlock">
<p><--- COPYRIGHT ---></p>
</div>
</body>
</html>

index.tpl

<div class="middleColumn">
<table style="width: 100%;background: #d7cf00;">
<tr>
<td align="center"><h3><font color="#550a04">News Headlines</font></h3></td>
</tr>
</table>
</div>
<!-- <div class="middleColumn">
<p>{BACKEND_RSS}</p>
<p>{BACKEND_TXT}</p>
</div> -->
<!-- BEGIN NEWS_BLOCK -->
<div class="middleColumn">
<h3>{NEWS_SUBJECT}</h3>
<h5>{NEWS_INDEX_RELEASE}</h5>
<hr />
<p><--- NEWS TEXT ---></p>
<p>{NEWS_SOURCE}</p>
<hr />
<p><--- COMMENTS ---></p>
</div>
<!-- END NEWS_BLOCK -->
<div class="middleColumn"><p>{NEWS_INDEX_PAGES}</p></div>