Show/Hide Div and site layout help!

[p90pts]

Hey folks,

Trying to set up the show/hide on my basic website for a university submission but looking for some help!

The show/hide div works but ruins the entire layout of the site. This image will explain better hopefully!!

[IMG]http://i809.photobucket.com/albums/zz11/bigval3/screen-capture-6.png[/IMG]

The layout should look like this and obviously the main part of the site will expand with text:

[IMG]http://i809.photobucket.com/albums/zz11/bigval3/27.jpg[/IMG]

This is the CSS I have for the show/hide divs:

#divone, #divtwo, #divthree, #divfour, #divfive {
    width:inherit;
    margin: 0;
    display: none;
    font-family: Trebuchet MS;
    float: right;
    
}

Now when I remove the divone div id tag from the html the site looks normal but obviously the show/hide function doesn't work, but when I re-add the divone div id it messes with the layout as shown above.

ANY help is really appreciated!!!!

[scrappedcola]

Looks like you need to clear your floats. Basically IE has this proprietary setting that determines how elements draw called hasLayout. To trigger this with floated divs an easy fix is sometimes to add the css zoom:1 to the div.

#divone, #divtwo, #divthree, #divfour, #divfive {
    width:inherit;
    margin: 0;
    display: none;
    font-family: Trebuchet MS;
    float: right;
    zoom:1;
 
}

Another way to fix would be to have a fix class that gets applied to the element that contains floated elements that is defined as:

.layoutFix{
   zoom:1;
}
.layoutFix:after
{
   content:".";
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
}

Some people would have this css defined in an IE only stylesheet which isn't really necessary as the other browsers will ignore the zoom:1 bit. It might take care of what you are seeing above. Else it would be helpful to see your html. You can share a snipit of it fairly easily via use of a site called jsFiddle.net which is a sandbox that allows you to play online with html, css, and javascript. Here is a thorough definition of the hasLayout.

[Dragennd]

A little bit of Javascript would fix your problem. All you need is a script that tells everything to stay visible and the one thing you want to change makes everything not specified invisible. A good way to make a lot of data visible without having to reload the page.

This all is assuming I'm getting the point of your topic lol.

For the Javascript I commonly use http://www.dynamicdrive.com for any scripts I don't know how to write (like this one :D).

[almostbob]

give the vanish/visible elements a higher z-index and opaque background, then when you display them they will fly over the other text, be readable, and vanish when closed

<script type="text/javascript">
<!--
(document.getElementById) ? dom = true : dom = false;
function hideIt2(id) {
if (dom) {document.getElementById(id).style.visibility='hidden';}
if (document.layers) {document.layers[id].visibility='hide';} }
function showIt2(id) {
if (dom) {document.getElementById(id).style.visibility='visible';}
if (document.layers) {document.layers[id].visibility='show';} }
--></script>
<a id="show" href='#' onClick="showIt2('hide');">SHOW</a>
<div id="hide" style="position:fixed; top:20px; left:10px; width:45%; visibility:hidden; padding:10px; margin:10px; background:#ececec; border: 1px solid; z-index:100;">talk bla bl bl stuff this that</div>
<button id="frm" onClick="hideIt2('hide');">Close</button></span>

I know, get the css out in the css file :)
I know, 2 DOM types is almost redundant but there are still old versions of firefox out there :P
the script will show or hide any element by its id, reusable