Clickable block as a whole

HTML & CSS
1

I added the following code to http://www.pmob.co.uk/temp/3colfixedtest_4.htm and change the name of “centrecontent” to intro for my own semantic use at http://dot.kr/x-test/3cols11-1.php .

<script type="text/javascript">
 
        window.onload=function() {
             document.getElementById("left").onclick=function() {
             window.location.href="left.php";
        }         
             document.getElementById("[COLOR="Red"]intro[/COLOR]").onclick=function() {
             window.location.href="intro.php";
        }
             document.getElementById("right").onclick=function() {
             window.location.href="right.php";
        }

    }
</script>

If a user clicks anywhere inside the left div block it will go to left.php.
If a user clicks anywhere inside the intro div block it will go to intro.php.
If a user clicks anywhere inside the right div block it will go to right.php.

It works fine as long as you click the area near to text at each div.
But what about the margin which has not text.

As left div has the longest text, intro div and right div has some margin on their bottom.

My problem is the margin is not clickable.

How can I make it the margin is clickable?

I tried for making maring clickable at the following links, but failed.

http://dot.kr/x-test/3cols12-1.php
http://dot.kr/x-test/3cols13-1.php

2

The margin is not a part of the box.

Instead, use padding. Then that part of the box will be clickable.

3

How can I make the padding is full of the rest of the text area in each box instead of margin in 3 columns?

4

The problem is that those three elements are NOT the full height of the viewport. They only appear to be full height, it is the BG color on the body that makes the side columns look full height.

You would need to use js to give the height of #outer to the other elements since it is the only one that is actually the height of the viewport. I’m sure Raffles could help you with that :slight_smile:

Your “intro” div gets it’s BG color from #outer but it does not extend to the bottom of the page. I don’t think you are going to want to try to use padding to fill the empty gaps since the space will always be changing with dynamic content.

[B]#outer[/B]{
    margin-left:130px;
    margin-right:130px;
    [COLOR=Blue]background: #FFF;[/COLOR] [COLOR=DarkGreen]/*#intro BG color*/[/COLOR]
    border-left:1px solid #000;
    border-right:1px solid #000;
    margin-bottom:-52px;
    [COLOR=Blue]min-height:100%[/COLOR]
}