It looks like you need to set your body to height=100, like so:



Let me know if this helped.

No joy.

I tried that and nothing. It's like C5 is completely ignoring all attempts to use CSS to code this properly. ITS DRIVING ME NUTS.

Here's the CSS:
#4colcontent {
float:left;
width:100%;
background:yellow;
position: relative; }

#4col {
float:left;
width:100%;
background:red;
right: 30%; }

#col-one { background-color: #08316b;
float:left;
position:relative;
width:20%;
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto -12px;
padding:15px;
text-align:left; }

#col-two { background:#fff;
/* for IE */
filter:alpha(opacity=70);
/* CSS3 standard */
opacity:0.7;
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
float:left;
position:relative;
height:100%;
width:20%;
margin:auto;
padding:15px;
text-align:left; }

#col-three {
width:30%;
float:left;
position:relative;
height:100%;
margin:auto;
padding:15px;
text-align:left; }

#col-four {
width:30%;
float:left;
position:relative;
height:100%;
margin:auto;
padding:15px;
text-align:left; }


Heres the custom page I had to make:

<?php
defined('C5_EXECUTE') or die("Access Denied.");
$this->inc('elements/header_noname.php'); ?>

<!-- <div id="central" class="no-sidebar"> -->

<div id="4col">

<!-- <div id="content"> (Original code)-->

<!-- column-one -->
<div id="4colcontent">
<div id="col-one">

<?php
$a = new Area('Main');
$a->display($c);
?>

</div>

<!-- column-two -->
<div id="col-two">

<?php
$a = new Area('Sidebar');
$a->display($c);
?>

</div>

<!-- column-three -->
<div id="col-three">

<?php
$a = new Area('Column Three');
$a->display($c);
?>

</div>

<!-- column-four -->
<div id="col-four">

<?php
$a = new Area('Column Four');
$a->display($c);
?>

</div>

<!-- <div style="clear:both"></div> (Original code)-->

</div>
<!-- contents end here -->
</div>

<?php $this->inc('elements/footer_nologin.php'); ?>

You can wrap your code in [noparse][code][/code][/noparse] tags to format them a bit fancier.

EDIT: without the noparse tags. just the code part
Best Wishes,
Mike

I'll do that from now on, sorry it did look a little unwieldy.

Matching column heights has always been difficult in css. Its not a concrete5 issue, but a css/html issue. If you need to prove that, try the equivalent to your code on a simple html page without any concrete5.

There are some CSS and Javascript tricks for doing it, including some noted a year or two back on this forum.

https://www.concrete5.org/community/forums/customizing_c5/how-to-mak...

http://www.concrete5.org/community/forums/usage/column-alignment-pr... which links fohttp://matthewjamestaylor.com/blog/equal-height-columns-cross-brows...

(there are more, these are just the ones I could find quickly)

For more general solutions, have a look at stackoverflow.

My personal preference for Javascript based solutions. The convolutions of doing this in css, for me, outweigh the benefits.

Hi John, I read the bit from mathewjames.... before, but although the code reads ok, the divs are embedded properly, C5 just ignores the CSS.

I'll scout around for some javascript, but now I'm entering the realms of programming and not designing.

Painful stuff, perhaps a nice pint of Beamish will help.

Usually with css issues, as long as the c5 caches are turned off, its nothing to do with c5 and just that your browser cache is not refreshing.

I think you need to forget c5 for a bit. While c5 has issues, that your css does not play with your html will not be one of them.

Build a simple html page, add your css and get that working. Use the browser developer console to see how it works and fine tune it.

Once you have html and css (and maybe javascript) working on a simple test page, you can take what you have learned and move it into your C5 theme/page type.