Div clearing problems after hiding a floated div.

[xkratosx]

Hi guys,

I've currently got two divs on a page, one which has a long list of areas, the other has information specific to that area. The list of areas is generally longer than the information bit, which is causing a bit of a problem with some Javascript I'm running (don't worry, this is definitely a CSS issue and not a Javascript one!).

I've got a few headers, and when you click on them, it toggles the information below it to either show, or hide it accordingly. All it does basically is set the position of the div to absolute and the left attribute to -5000px to nudge it off the page.

Problem is, whenever you run this code, it's cutting off the container div completely, as well as the area list that's being floated.

I have clear: both applied to the container div I think (or rather, I've stuck a div at the bottom of it with clear: both applied to it :P) but it seems to be disregarding that when I run the Javascript.

I don't have access to an FTP here unfortunately, and it's got loads of PHP so it'd be a bit of a nightmare to post the code anyway, but hopefully I've given enough information to give a jist of just what's going on. If not, I'll happily mock up some basic test code for it.

Thanks!

[DaveWoods]

Sorry it's a little difficult to understand the problem without seeing it in action.

If the clear: both; works when you aren't running the JavaScript then it sounds like it is more of a problem with the JavaScript itself.

I'd also really consider your use of JavaScript in this situation and think about what will happen if a user is trying to use this page and doesn't have JavaScript installed?

Remember that HTML should be used for the content and the users should be able to use the site without both CSS and JavaScript.

Then you should add the CSS to enhance presentation and finally add JavaScript to enhance the behaviour.

If you remove the CSS or JavaScript then the application/webpage should still function correctly.

You may want to rethink your approach if this is not the case as you'll be creating an inaccessible page that a percentage of your users will be unable to use.

[xkratosx]

Many thanks for the reply, the Javascript quite literally pushes the div to the left and sets the position to absolute; that's it, so I don't think the problem lies with that. I used some ridiculously bloated Javascript library before to toggle it with a sliding animation (mootools fwiw) and had the exact same problem, the containing div just keeps stretching to the size of the info div/main content area.

As for the page design, it does look fine when viewed as just HTML, the div is default to be viewable, but then set to hidden onload through Javascript; so it's only hidden for people who hava Javascript from the offset. Anyone who has it disabled will still be able to view the content okay

Thanks

[DaveWoods]

In that case would display: none; achieve the same effect as it sounds like a div in your page is trying to render at the same height as one of the page but by using display: none; it should ignore it?

I wouldn't usually suggest this method but as you'll be applying it through JavaScript then presumably it'll have no adverse effects with the search engines as you've already said that without JavaScript, the full menu will be displayed expanded anyway.

If that doesn't help then I think we'll have to see an example of the code / demo of the site online somewhere.

[xkratosx]

It's for an intranet site so search engines shouldn't be effected anyway so that should be fine

Where should I put display: none; to?

Many thanks again for your help, really appreciate it sir.

[DaveWoods]

Instead of the position: absolute and left property. To be honest I'm not convinced it'll solve the problem but it's a stab in the dark without seeing any code or being able to see the site or an example of the problem.

[Paul O'B]

Hi,

and it's got loads of PHP so it'd be a bit of a nightmare to post the code anyway, but hopefully I've given enough information to give a jist of just what's going on. If not, I'll happily mock up some basic test code for it.

If dave's suggestion doesn't work then you'll have to post a mock up exhibiting the problem. (Don't post PHP but take the code from view source.)

Ie is a bit picky in hide and show situations with absolute positioning in certain situations so the display:none may work better as Dave suggested.

[xkratosx]

Huge thanks, it kind of worked, or rather it did work great, but for some reason when you moved the mouse below a certain point on the screen it broke again? Pretty odd!

Here's an example that's near identical to what I'm using, just with all of the irrelevant points missing, sorry to be pain about this but any help would be very much appreciated, thanks!

http://pastebin.com/m1fd85461

[Paul O'B]

Hi,

That javascript has a load of errors and I know nothing about javascript The 'elemen't has no properties as you need to get a reference to the element that the id refers to.

You haven't cleared the floats if I'm looking at the right demo and you are positioning the text at only 400px off screen. That text is longer than 4000px when its on one line so it bleeds into the main page. You need to shove it much further away.

I think this is what you were trying to do.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Induction</title>
<style type="text/css">
    * {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px}
    BODY {margin-top: 20px; FONT-SIZE: 0.84em; BACKGROUND: #f0f0fb; BEHAVIOR: url("hover.htc"); FONT-FAMILY: 'Trebuchet MS', 'Verdana', 'Tahoma', 'Arial'; HEIGHT: 100&#37;; TEXT-ALIGN: center; xbackground: #E7E0D0}
    A {COLOR: #444; HEIGHT: 27px; TEXT-DECORATION: none}
    A:hover {COLOR: #999}
    H2 {    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FONT-SIZE: 1.14em; PADDING-BOTTOM: 5px; TEXT-TRANSFORM: lowercase; COLOR: #2474ac; PADDING-TOP: 0px; FONT-FAMILY: "Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif}
    H3 {    PADDING-LEFT: 10px; FONT-WEIGHT: normal; FONT-SIZE: 1.35em; MARGIN-BOTTOM: 20px; TEXT-TRANSFORM: lowercase; COLOR: #777799; BORDER-BOTTOM: #e3e3e3 1px solid; FONT-FAMILY: 'Georgia', 'Trebuchet MS', 'Verdana', 'Tahoma', 'Arial'; TEXT-ALIGN: right; TEXT-DECORATION: none}
    P {    MARGIN: 5px 5px 16px}
    #container {    BORDER-RIGHT: #ddd 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #ececec 4px solid; PADDING-LEFT: 0px; BACKGROUND: #fff; PADDING-BOTTOM: 10px; MARGIN: 0px auto; BORDER-LEFT: #ddd 1px solid; WIDTH: 970px; PADDING-TOP: 5px; BORDER-BOTTOM: #ddd 1px solid; TEXT-ALIGN: left; xborder: 1px solid #DAD3BC}
    #ind_left {float: left; margin-left: 5px; width: 205px}
    #ind_right {margin-left: 240px; margin-right: 10px}

    </style>
<script type="text/javascript">
function hide(element){
    element = document.getElementById(element);
    element.style.position = 'absolute';
    element.style.left = '-9999em';
}
function show(element){
    element = document.getElementById(element);
    element.style.position = 'relative';
    element.style.left = '-9999em';
}
function toggle(element){
element = document.getElementById(element);
    if( element.style.position != 'absolute' )
    {
        element.style.position = 'absolute';
        element.style.left = '-9999em';
    }
    else
    {
        element.style.position = 'relative';
        element.style.left = '0px';
    }
}    
</script>
</head>
<body>
<div id="container">
    <div id="ind_left">
        <h3>Locations</h3>
        List for extra padding<br/>
        <br/>
        List for extra padding<br/>
        <br/>
        List for extra padding<br/>
        <br/>
        List for extra padding<br/>
        <br/>
        List for extra padding<br/>
        <br/>
        List for extra padding<br/>
        <br/>
        List for extra padding<br/>
        <br/>
        List for extra padding<br/>
        <br/>
        List for extra padding<br/>
        <br/>
        List for extra padding<br/>
        <br/>
        List for extra padding<br/>
        <br/>
        List for extra padding<br/>
        <br/>
        List for extra padding<br/>
        <br/>
        List for extra padding<br/>
        <br/>
        List for extra padding<br/>
        <br/>
        List for extra padding<br/>
        <br/>
        List for extra padding<br/>
        <br/>
        List for extra padding<br/>
        <br/>
    </div>
    <div id="ind_right">
        <h3>title</h3>
        <p>Below are...</p>
        <h2 onclick="toggle('general')" style="cursor: pointer;" title="Click here to view the general documents related to this site">&#187; General Documents</h2>
        <div id="general">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus eu elit. Etiam ut metus nec felis sagittis ullamcorper. Duis varius varius lectus. Curabitur aliquam. Mauris lorem tellus, aliquet quis, convallis sed, congue non, orci. Suspendisse potenti. Pellentesque dapibus, urna in pharetra vestibulum, justo turpis elementum purus, id pulvinar neque enim sed mi. Sed interdum pede quis mauris. Quisque semper dapibus odio. Quisque volutpat mi vitae quam. Nam tempor massa eget lorem. Donec consequat. Aenean rutrum commodo velit. Curabitur sodales, enim vel congue iaculis, diam nunc eleifend urna, vitae rutrum leo massa dictum eros. Integer accumsan ultrices lorem. Nulla id massa in arcu laoreet gravida.</p>
            <p>Sed eu elit vel massa tincidunt posuere. Pellentesque viverra eros id mauris sollicitudin commodo. Nullam molestie sapien sit amet nibh. Sed mattis congue nibh. Curabitur tempus, turpis a viverra iaculis, nunc neque mollis dolor, nec gravida mi dolor sed ante. Mauris et nisi. Maecenas orci. Sed ultricies. Nullam erat. Donec pretium mi eget lectus. In hac habitasse platea dictumst. Suspendisse aliquam. Proin erat. Cras sed felis. Proin magna. Suspendisse in libero vel justo euismod luctus.</p>
        </div>
        <script type="text/javascript">hide('general');</script>
        <h2 onclick="toggle('specific')" style="cursor: pointer;" title="Click here to view the site specific documents">&#187; Site-Specific Documents</h2>
        <div id="specific">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus eu elit. Etiam ut metus nec felis sagittis ullamcorper. Duis varius varius lectus. Curabitur aliquam. Mauris lorem tellus, aliquet quis, convallis sed, congue non, orci. Suspendisse potenti. Pellentesque dapibus, urna in pharetra vestibulum, justo turpis elementum purus, id pulvinar neque enim sed mi. Sed interdum pede quis mauris. Quisque semper dapibus odio. Quisque volutpat mi vitae quam. Nam tempor massa eget lorem. Donec consequat. Aenean rutrum commodo velit. Curabitur sodales, enim vel congue iaculis, diam nunc eleifend urna, vitae rutrum leo massa dictum eros. Integer accumsan ultrices lorem. Nulla id massa in arcu laoreet gravida.</p>
            <p>Sed eu elit vel massa tincidunt posuere. Pellentesque viverra eros id mauris sollicitudin commodo. Nullam molestie sapien sit amet nibh. Sed mattis congue nibh. Curabitur tempus, turpis a viverra iaculis, nunc neque mollis dolor, nec gravida mi dolor sed ante. Mauris et nisi. Maecenas orci. Sed ultricies. Nullam erat. Donec pretium mi eget lectus. In hac habitasse platea dictumst. Suspendisse aliquam. Proin erat. Cras sed felis. Proin magna. Suspendisse in libero vel justo euismod luctus.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus eu elit. Etiam ut metus nec felis sagittis ullamcorper. Duis varius varius lectus. Curabitur aliquam. Mauris lorem tellus, aliquet quis, convallis sed, congue non, orci. Suspendisse potenti. Pellentesque dapibus, urna in pharetra vestibulum, justo turpis elementum purus, id pulvinar neque enim sed mi. Sed interdum pede quis mauris. Quisque semper dapibus odio. Quisque volutpat mi vitae quam. Nam tempor massa eget lorem. Donec consequat. Aenean rutrum commodo velit. Curabitur sodales, enim vel congue iaculis, diam nunc eleifend urna, vitae rutrum leo massa dictum eros. Integer accumsan ultrices lorem. Nulla id massa in arcu laoreet gravida.</p>
            <p>Sed eu elit vel massa tincidunt posuere. Pellentesque viverra eros id mauris sollicitudin commodo. Nullam molestie sapien sit amet nibh. Sed mattis congue nibh. Curabitur tempus, turpis a viverra iaculis, nunc neque mollis dolor, nec gravida mi dolor sed ante. Mauris et nisi. Maecenas orci. Sed ultricies. Nullam erat. Donec pretium mi eget lectus. In hac habitasse platea dictumst. Suspendisse aliquam. Proin erat. Cras sed felis. Proin magna. Suspendisse in libero vel justo euismod luctus.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus eu elit. Etiam ut metus nec felis sagittis ullamcorper. Duis varius varius lectus. Curabitur aliquam. Mauris lorem tellus, aliquet quis, convallis sed, congue non, orci. Suspendisse potenti. Pellentesque dapibus, urna in pharetra vestibulum, justo turpis elementum purus, id pulvinar neque enim sed mi. Sed interdum pede quis mauris. Quisque semper dapibus odio. Quisque volutpat mi vitae quam. Nam tempor massa eget lorem. Donec consequat. Aenean rutrum commodo velit. Curabitur sodales, enim vel congue iaculis, diam nunc eleifend urna, vitae rutrum leo massa dictum eros. Integer accumsan ultrices lorem. Nulla id massa in arcu laoreet gravida.</p>
            <p>Sed eu elit vel massa tincidunt posuere. Pellentesque viverra eros id mauris sollicitudin commodo. Nullam molestie sapien sit amet nibh. Sed mattis congue nibh. Curabitur tempus, turpis a viverra iaculis, nunc neque mollis dolor, nec gravida mi dolor sed ante. Mauris et nisi. Maecenas orci. Sed ultricies. Nullam erat. Donec pretium mi eget lectus. In hac habitasse platea dictumst. Suspendisse aliquam. Proin erat. Cras sed felis. Proin magna. Suspendisse in libero vel justo euismod luctus.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus eu elit. Etiam ut metus nec felis sagittis ullamcorper. Duis varius varius lectus. Curabitur aliquam. Mauris lorem tellus, aliquet quis, convallis sed, congue non, orci. Suspendisse potenti. Pellentesque dapibus, urna in pharetra vestibulum, justo turpis elementum purus, id pulvinar neque enim sed mi. Sed interdum pede quis mauris. Quisque semper dapibus odio. Quisque volutpat mi vitae quam. Nam tempor massa eget lorem. Donec consequat. Aenean rutrum commodo velit. Curabitur sodales, enim vel congue iaculis, diam nunc eleifend urna, vitae rutrum leo massa dictum eros. Integer accumsan ultrices lorem. Nulla id massa in arcu laoreet gravida.</p>
            <p>Sed eu elit vel massa tincidunt posuere. Pellentesque viverra eros id mauris sollicitudin commodo. Nullam molestie sapien sit amet nibh. Sed mattis congue nibh. Curabitur tempus, turpis a viverra iaculis, nunc neque mollis dolor, nec gravida mi dolor sed ante. Mauris et nisi. Maecenas orci. Sed ultricies. Nullam erat. Donec pretium mi eget lectus. In hac habitasse platea dictumst. Suspendisse aliquam. Proin erat. Cras sed felis. Proin magna. Suspendisse in libero vel justo euismod luctus.</p>
        </div>
        <script type="text/javascript">hide('specific');</script>
    </div>
    <div style="clear:both;height:1px"></div>
</div>
</body>
</html>

I haven't touched the CSS but why have you formatted it so badly like that. Use lower case for all the properties as it looks a mess otherwise (you are using (pretend) xhtml after all).

[james_littler]

It's for an intranet site so search engines shouldn't be effected anyway so that should be fine

Where should I put display: none; to?

Many thanks again for your help, really appreciate it sir.

Sir Dave ay.... nice ring to it : )

[xkratosx]

^

Jeez, Paul O'B you're an absolute legend, thank you so much for that!

Can I just confirm that the only bits you changed were fixing my broken Javascript, as well as adding the clearfix div at the bottom of the container? Just for future reference

Many thanks again

[Paul O'B]

IIRC then yes that's all I changed

(I also changed the onclick call so that the id had quotes around it.}

onclick="toggle('specific')"

[xkratosx]

Awesome, tyvm!