making a section appear to not exist 1

[1DMF]

How do you make a section appear to not exist, so lets say we have two fieldsets, both floated and if the second was visible you would see it to the right of the first one.

fine, but I want the second fieldset to be hidden, and so the first fieldset actually align centrally within its containing div.

so it looks like there is only one central column, but when a certain selection is made the column shifts to the left and the second fieldset is displayed to the right, but they are both central positioned.


I've tried..

<fieldset style="display:none;visibility:hidden;position:absolute;">

but it doesn't work, display:none seems to work for elements going down the page, how do you make it work going across the page?

http://dev.justlifecover.co.uk/quote_notqual.html

thanks

1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[monksnake]

Hmmm, You can originally center the first column by default and hide the second. Then make some CSS classes for what the sections will look like when they are both visible.
For this way to work though (as I see it) you will need some javascript to change the classNames. I would set it up, but I'm about ready to leave for the day.

<.

 

[1DMF]

How would you hide the second column keeping the first centered, display:none; doesn't seem to work with columns, only rows.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[monksnake]

I'll write up an example and see what I can do.

<.

 

[monksnake]

Here is an example of what you want, this is done with your code.
Ok I made the following additions/changes to the CSS file:

#quote_notqual fieldset {
    display:block;
    width: 350px;
    margin:0px auto;
    text-align:center;
    padding-bottom:4px;
}

fieldset.leftFieldset {
   float:left;
}
    
fieldset#app2 {
   display:none;
}

The following changes where made to the JS file

function joint_app(a){
    
    if(a.value == "Yes"){
        document.getElementById('app2').style.display='block';
        document.getElementById('app2').className = "leftFieldset";
        document.getElementById('app1').className = "leftFieldset";
    }
    else{
        document.getElementById('app2').style.display='none';        
        document.getElementById('app2').className = "";
        document.getElementById('app1').className = "";
    }
    
}

I'm not sure exactly which elements you wanted to center/uncenter, but this should be enough to get you started.





<.

 

[1DMF]

d'oh just realised the problem, I had float:left on the fieldsets, so even though the display:none; was applied to #app2 , the float kept #app1 hard left.

you need to not have the float, but apply the float when toggled.

Much clearer now, many thanks!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[monksnake]

No problem

<.