DIVs and css

[Joe_Fox]

Can anyone help me?
I need to make a page layout that has four rows, one of which has two columns. The left column will always have content whereas the right column may or may not have any content.

If the right hand column contains no content, I want to hide the right hand column and expand the left hand column across the page but if the right hand column DOES contain some content, I want the right hand column to take up 50% of the page width.

What is the css property I should be using?

 

[Macky]

If the right hand column contains no content, I want to hide the right hand column and expand the left hand column across the page but if the right hand column DOES contain some content, I want the right hand column to take up 50% of the page width.

What is the css property I should be using?

There isn't one, you can't use CSS to dynamically set CSS, you will need to script it.

The easiest way to that is to use a framework like jQuery.

First off, either download the jquery library and point to it as you would any other .js file, or you can access it using the google api link:

<script type="text/javascript" src="jquery.js"></script>

OR:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Then include this script, either directly in the head of the page or point to it as a separate .js file. This will run when the page loads.

$(function() {
    var containsText = $('div#rightHand').text();
    if(containsText){
        $('div#rightHand').css({'width':'50%'});
        $('div#leftHand').css({'width':'50%'});
    }else{
        $('div#rightHand').css({'width':'0px'});
        $('div#leftHand').css({'width':'100%'});
    }
});

This assumes that you have two divs with IDs set to 'rightHand' and 'leftHand'. You can obviously call them what you want to, as long as you've explicitly set their ID.

*edit: This will work in all browsers btw

 

[bocadillo]

I didn't know that.