Help with css layout issue

[howard.a.s]

A while back I posted a question that asked for help to overcome a problem with a web page that I am constructing. I was fortunate enough to receive some advice, which, whilst much appreciated, involved a complete rework of the original css.

Thing is, what I really need at this point is to be able to correct the problem that I am having without making lots of drastic alterations to the existing source code or css.

So, once again, I am back to help for advice.

I have this sneaking feeling that just a very small alteration is necessary in order for my page to display as I need it to, but I just can't determine what this alteration should be.

Please take a look at the following:

http://www.amindtochange.biz/amindtochangecom/template_problem/index.html

I have coloured the left-hand content area black, and the right-hand sidenav area red for easy identification.

Here is the associated style sheet:

http://www.amindtochange.biz/amindtochangecom/template_problem/default.css

What I am trying to achieve is for both the black and red area to grow vertically and in-line with each other. So, if I add a lot of content to the left-hand area, and none to the right-hand area, the coloured backgrounds still match in terms of height, all the way down to the footer area.

Not sure if that makes sense, but I can't think how else to describe it, other than to say I require matching column heights in terms of background, regardless of their content

I have tried to achieve this and have failed miserably.

At the moment, if I add content to the black area, the black background kind of spills over into the top of the red, or under the red.

By the way, the sidnav must remain inside the content area, and not outside of it.

Any help gratefully received.

 

[caraewilton]

Hi. If you look at the other post (sure it was yours), the guy who did that template made it so that if add content to the left hand column the right column appears to be the same height. He did this by using the same color background for the whole content area and then making the left columns color different with the white borders being attributed to this left column. An illusion if you will It works superbly if the left column will always be longer than the right. If, however, the right column is longer, then you are going to end up with you currently have anyway.

The only solution to this problem, that I know of, is to use a background picture for the content area and then have your left and right columns lie on this background. The columns have no background and thus it appears that both are increasing equally.

I am not sure if I have explained this well.

To clarify. Look at this page, even columns. Here you can see that despite the fact that the left column is much longer than the right, they appear to be equal lengths. If you save this page onto your computer and open it up in an editor, you will see it has a background image that gives the illusion of two even columns. (unfortunately this page has problems in IE6, but works in IE 7, firefox, safari, opera and chrome).

You can compare this with this uneven column layout.

 

[tomdkat]

The only solution to this problem, that I know of, is to use a background picture for the content area and then have your left and right columns lie on this background. The columns have no background and thus it appears that both are increasing equally.

I remember that "magician" you mentioned above. In addition to the background color technique used, the other poster put a DIV at the bottom of the main content DIV with a "clear: both" style defined. This DIV ensures the main content DIV has the height of the tallest of the two middle DIVs in question. This made the "illusion" come to life. I believe Eisenheim posted that info in the other thread.

I have coloured the left-hand content area black, and the right-hand sidenav area red for easy identification.

I'm not seeing this in the link you posted above. Is anyone else seeing these colored areas?

Peace...

 

[caraewilton]

I'm not seeing this in the link you posted above. Is anyone else seeing these colored areas?

Yes they are there but they are empty so FF ignores them. Have a look in IE.

 

[tomdkat]

Yes they are there but they are empty so FF ignores them. Have a look in IE.

Firefox isn't ignoring them. IE is wrong, once again.

Here is the basic structure (for the section of the page in question):

<div class="container">
<div class="main">
<div class="content">
<div class="sidenav">
</div>
</div> <!-- content -->
</div> <!-- main -->
</div> <!-- container -->

Now, the "content" DIV is floated left and the "sidenav" DIV is floated right. The black background is in the "main" DIV and since the DIVs contained within the "main" DIV are floated, there is nothing in the "normal flow" of the "main" DIV and so it doesn't show. I managed to get the area displayed by adding some paragraphs. IE incorrectly, IMO, displays the black and red backgrounds since the "main" DIV is effectively empty and we're dealing with a XHTML 1.0 document.

With that being stated, I believe I've come up with a solution that actually works and DOES NOT require a redesign of the page, nor does it require a major overhaul of the CSS involved.

I'm still not sure how or why this works but it appears to. Here's the dealio:

First, I removed the "content" DIV since it didn't seem to serve any real purpose:

<div class="main">
[b][color=red]<!--<div class="content">-->[/color][/b]
<div class="sidenav">
<p>This is some nav</p>
<p>This is some nav</p>
</div>
......
[b][color=red]<!--</div> <!** content **> -->[/color][/b]
</div> <!-- main -->
</div> <!-- container -->

Next, I changed the sidenav DIV to be absolutely positioned, like this:

.sidenav {
  border-style: solid;
  border-color: white;
  border-width: 0px 2px 0px 8px;
  float: right;
  width: 207px;
  background-color: red;
[b][color=red]  display: block;
  position: absolute;
  height: 100%;
  right: 0px;[/color][/b]
}

The "right: 0px" aligns the DIV along the right side of the "main" DIV. The "height: 100%" makes sure the DIV has the proper height.

Next, I had to give the "main" DIV relative positioning so the "sidenav" DIV's height would be restricted to the height of the "main" DIV:

.main {
  border-style: solid;
  border-color: #ffffff;
  border-width: 7px 1px 1px;
  background-color: black;
  width: 778px;
[b][color=red]position: relative;
  display: block;[/color][/b]
}

I made some other changes that didn't seem to have any effect. See what the above changes do for you. The above changes work consistently across IE7, Firefox 3, and Opera 9.52 all on Windows XP for me.

Peace...