jQuery / CSS / HTML Stacking Order

Edit:

Problem is now fixed, credits to EliteGM for the solution and the debugging :) Thank you to those who attempted to fix my as well I do appreciate it! :)

Hi there, I'm building a website for a driving school and basically I've got these tabs where when you click them, a new panel slides down underneith it using jQuery.

The problem is, when I click the "Booking" tab the page slides down, of which i want it to do, but on the other two tabs, the page doesn't slide down and just overlaps the content of the page.

Pictures to describe:

Screenshot by Lightshot - As you can see, the two tabs overlap

Screenshot by Lightshot - In this one, the booking moves the page down.

What do i want?

I want the two tabs (Feed & Contact) to act the same way as the booking and move the page down when they are expanded.

JSFiddle
http://jsfiddle.net/tgvbE/

Code

HTML

Code:

---

    <div class="mainFastOption">
            <div class="mainFastOptionBook">
                <div class="mainFastOptionBookTitle" onclick="bookingToggle()">Book Lessons Now</div>
                <div class="mainFastOptionBookPanel">
                    <input type="text" placeholder="First Name" /><br />
                    <input type="text" placeholder="Last Name" /><br />
                    <input type="number" placeholder="Phone Number" /><br />
                    <input type="email" placeholder="E-Mail Address" /><br />
                <button>Send Inquiry</button>
            </div>
        </div>
            <div class="mainFastOptionFeed">
                <div class="mainFastOptionFeedTitle" onclick="feedToggle()">View Our Feed</div>
                <div class="mainFastOptionFeedPanel">
                                <p>Loading Social Feeds...</p>
            </div>
        </div>
            <div class="mainFastOptionContact">
                <div class="mainFastOptionContactTitle" onclick="contactToggle()">Got a Question?</div>
                <div class="mainFastOptionContactPanel">
                                <p>Loading Contact Page...</p>
            </div>
        </div>
        <div class="clear"></div>
    </div>

---

CSS

Code:

---

.mainFastOption {
        height: auto;
        margin-bottom: 15px;
        text-shadow: 0px 1px 2px #000;
        clear: both;
        float: none;
}
.mainFastOptionBook {
        width: 310px;
        float: left;
        margin-right: 10px;
}
.mainFastOptionBookTitle {
        height: 70px;
        line-height: 70px;
        text-align: center; /* Old browsers */
        color: #FFF;
        box-shadow: 0px 0px 3px 0px #000;
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
        background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
        background-color:#fe1a00;
        border-radius: 5px;
}
.mainFastOptionBookTitle:hover {
        cursor: pointer;
}
.mainFastOptionBookPanel {
        text-align: center;
        display: none;
        background-color: #FFF;
        margin-top: 5px;
        padding-top: 5px;
        padding-bottom: 5px;
        box-shadow: 0px 0px 3px 0px #000;
        border-radius: 5px;
}
.mainFastOptionBookPanel email, input {
        width: 90%;
        border: solid 1px #ccc;
        padding: 3px;
        margin: 5px 0px;
}
.mainFastOptionFeed {
        float: left;
        width: 310px;
        margin-right: 8px;
        margin-left: 5px;
        height: 70px;
}
.mainFastOptionFeedTitle {
        line-height: 70px;
        text-align: center;
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0) );
        background:-moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');
        background-color:#3d94f6;
        color: #FFF;
        box-shadow: 0px 0px 3px 0px #000;
        text-decoration: none;
        border-radius: 5px;
}
.mainFastOptionFeedTitle:hover {
        cursor: pointer;
}
.mainFastOptionFeedPanel {
        text-align: center;
        display: none;
        background-color: #FFF;
        margin-top: 5px;
        padding-top: 5px;
        padding-bottom: 5px;
        box-shadow: 0px 0px 3px 0px #000;
        border-radius: 5px;
}
.mainFastOptionContact {
        float: right;
        width: 310px;
        margin-left: 3px;
        height: 70px;
}
.mainFastOptionContactTitle {
        line-height: 70px;
        text-align: center;
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #89c403), color-stop(1, #77a809) );
        background:-moz-linear-gradient( center top, #89c403 5%, #77a809 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809');
        background-color:#89c403;
        color: #FFF;
        box-shadow: 0px 0px 3px 0px #000;
        text-decoration: none;
        border-radius: 5px;
}
.mainFastOptionContactTitle:hover {
        cursor:pointer;
}
.mainFastOptionContactPanel {
        text-align: center;
        display: none;
        background-color: #FFF;
        margin-top: 5px;
        padding-top: 5px;
        padding-bottom: 5px;
        box-shadow: 0px 0px 3px 0px #000;
        border-radius: 5px;
}

---

jQuery

Code:

---


function bookingToggle() {
        $(".mainFastOptionBookPanel").slideToggle("slow");
}
function feedToggle() {
        $(".mainFastOptionFeedPanel").slideToggle("slow");
};
function contactToggle() {
        $(".mainFastOptionContactPanel").slideToggle("slow");
};

---

The Specific problem online
http://jsfiddle.net/tgvbE/

Any help would be much appreciated.

Many thanks,

Matt Clarke

If you add float:none; to the .mainFastOptionFeedPanel and .mainFastOptionContactPanel does it still happen?

or is it clear:both;? Sorry forgot which one it is.

Quote:

---

Originally Posted by Parker

If you add float:none; to the .mainFastOptionFeedPanel and .mainFastOptionContactPanel does it still happen?

or is it clear:both;? Sorry forgot which one it is.

---

clear:both; should do the trick in most cases.

Food for thought more than fixing your issue (I haven't even looked into the issue just spotted the CSS naming)

Start optimising your css to be less... Silly.

"mainFastOptionFeedPanel" is a really long and annoying name for any CSS, it might explain what it is and what it does but it's really not nice to look at or work with.

I'd suggest going for something like "feedPanel", if all the styling is the same for that type then don't have separate names. Also for your javascript STOP USING onclick WITHIN the html.

If you are going to use it with the onclick="*Toggle()" then at least make it like this:

HTML:

Code:

---

<a href="#" onclick="toggle()">Blah</a>

---

Javascript:

Code:

---

function toggle( event ) {
    event.preventDefault(); // This stops the url having a # at the end of it
    $( this ).slideToggle("slow");
}

---

Now every button with the toggle function set to it will toggle.

If you set all those toggle buttons to have the same class i.e. isToggle

Javascript:

Code:

---

$( '.isToggle' ).on({
    click : function( event ) {
        event.preventDefault(); // This stops the url having a # at the end of it
        $( this ).slideToggle( 'slow' );
    }
});

---

Now anything with the 'isToggle' class will slide down on click.

All the best,
Richard Komakech.

Quote:

---

Originally Posted by Komakech

Food for thought more than fixing your issue (I haven't even looked into the issue just spotted the CSS naming)

Start optimising your css to be less... Silly.

"mainFastOptionFeedPanel" is a really long and annoying name for any CSS, it might explain what it is and what it does but it's really not nice to look at or work with.

I'd suggest going for something like "feedPanel", if all the styling is the same for that type then don't have separate names. Also for your javascript STOP USING onclick WITHIN the html.

If you are going to use it with the onclick="*Toggle()" then at least make it like this:

HTML:

Code:

---

<a href="#" onclick="toggle()">Blah</a>

---

Javascript:

Code:

---

function toggle( event ) {
    event.preventDefault(); // This stops the url having a # at the end of it
    $( this ).slideToggle("slow");
}

---

Now every button with the toggle function set to it will toggle.

If you set all those toggle buttons to have the same class i.e. isToggle

Javascript:

Code:

---

$( '.isToggle' ).on({
    click : function( event ) {
        event.preventDefault(); // This stops the url having a # at the end of it
        $( this ).slideToggle( 'slow' );
    }
});

---

Now anything with the 'isToggle' class will slide down on click.

All the best,
Richard Komakech.

---

Thanks for your input, Richard, although it didn't fix my error, I'll take what you said into consideration.

Problem is still occurring, I've added a clear:both on it and it's still giving me the same error, it was the first thing I did when I actually discovered the problem.

Any other help is much appreciated.

Does moving your <div class="clear"> to this:

Code:

---

            <div class="mainFastOptionContact">
                <div class="mainFastOptionContactTitle" onclick="contactToggle()">Got a Question?</div>
                <div class="mainFastOptionContactPanel">
                                <p>Loading Contact Page...</p>
            </div>
        </div>
    </div>
    <div class="clear"></div>

---

Do anything?

Quote:

---

Originally Posted by EliteGM

Does moving your <div class="clear"> to this:

Code:

---

            <div class="mainFastOptionContact">
                <div class="mainFastOptionContactTitle" onclick="contactToggle()">Got a Question?</div>
                <div class="mainFastOptionContactPanel">
                                <p>Loading Contact Page...</p>
            </div>
        </div>
    </div>
    <div class="clear"></div>

---

Do anything?

---

Nothing :( if I remove it, it makes the tabs go to the main content, as it would usually with HTML.

If you're trying to do a clear, I would suggest to do it like this:

Code:

---

.clear:after {
    content: "";
    clear: both;
    display: table;
}

---

Although if you code properly it would not require a clear-fix.

Quote:

---

Originally Posted by BlueOwner

If you're trying to do a clear, I would suggest to do it like this:

Code:

---

.clear:after {
    content: "";
    clear: both;
    display: table;
}

---

Although if you code properly it would not require a clear-fix.

---

The specified code didn't make any changes to my error, and could you please show me the proper way of how to code this rather than using a Clear Fix. I am presuming you're going to say something like use positioning techniques or something.

My problem still remains, if someone could assist me, it'd be great, many thanks!

I don't see a clear class in your css? :p

Quote:

---

Originally Posted by bramdebouvere

I don't see a clear class in your css? :p

---

I only copied the elements of which are included in my error, I have a clear class at the top of my CSS file.

Maybe post the whole thing & that way it'll be easier for a user to test out & fix it.

Quote:

---

Originally Posted by Parker

Maybe post the whole thing & that way it'll be easier for a user to test out & fix it.

---

There is no need for me to post the whole thing, this is the specific part of my error.

CSS - Clearing floats

Quote:

---

Originally Posted by EliteGM

CSS - Clearing floats

---

Attempted this, gave me the following results:

Screenshot by Lightshot
Screenshot by Lightshot

Thanks for the help though.

Error is still occuring, if anyone has a solution or an idea as to how I can fix this, please let me know.

Many thanks,

Matt

Basically when taking space by columns you should take care all columns that are floated left are inside a div before the content div. At the end of your columns you should insert a cleared div. That's the trick. A short example:

Code:

---

<div id="nav">
  <div id="col1" style="float: left; width: 100px;">Test 1</div>
  <div id="col2" style="float: left; width: 100px;">Test 2</div>
  <div id="col3" style="float: left; width: 100px;">Test 3</div>
  <div id="clearDiv" style="clear: both;">Test 1</div>
</div>
<div id="content">Content</div>

---

By forgetting the "clearDiv" you will get the effect you had before, overlapping the content with the floated columns.
See, your "nav" div stays 0px height when adding floated column divs to the top left corner of "nav", they are just stick in front of your view. However, when adding the "clearDiv" you add a div below the left-floated divs without being sticked in front of your view, so the cleared div will be a view-part of "nav" that will force "nav" to increase the height to get enough space for "clearDiv" and tada ... the "content"-div will go down. I hope this helped anyway.

About your new problem:
Imagine in the example I gave above my "nav"-div would have only 250px width? What will happen with three 100px-width column child divs? Yes, they will cry due too less space. To be more exact the last column child div will be word wrapped to the next line (as you can see in your screenshot).
As first I suggest you to float all your childs to the left.
As second I suggest you to take care of your available width and make sure you do not take too much on your childs:

Your parents content area (width) must not be smaller than all your childs complete size (margin-left + border-left + padding-left + width + padding-right + border-right + margin-right)

http://www.w3.org/TR/CSS2/images/boxdim.png

Quote:

---

Originally Posted by Parker

Maybe post the whole thing & that way it'll be easier for a user to test out & fix it.

---

Oh well, I like specific questions, we are not here to fix whole problems, we are?
I would never read a source that is longer than 15-20 lines, I do not like problem dumps, the screenshot is a way better. Matt should solve his problem on his way by understanding and finding the solution in own effort. This way it will stay in his head a pretty neat way. :3

Just put it online somewhere, makes it way easier to fix than when you just post half of your code here.

Also, don't use
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
It's buggy as fuck.

Quote:

---

Originally Posted by bramdebouvere

Just put it online somewhere, makes it way easier to fix than when you just post half of your code here.

Also, don't use
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
It's buggy as fuck.

---

Like I said previously, there is no need for me to do that. I've posted the necessary parts of which is causing my error, the container and the content inside the container. Don't mean to be offensive, but if you're good at what you know, you'd understand what the displayed code does and possibly how it can be fixed. - Again, did not mean that to be offensive.

Quote:

---

Originally Posted by שเ๒єtгเ๒є

Basically when taking space by columns you should take care all columns that are floated left are inside a div before the content div. At the end of your columns you should insert a cleared div. That's the trick. A short example:

Code:

---

<div id="nav">
  <div id="col1" style="float: left; width: 100px;">Test 1</div>
  <div id="col2" style="float: left; width: 100px;">Test 2</div>
  <div id="col3" style="float: left; width: 100px;">Test 3</div>
  <div id="clearDiv" style="clear: both;">Test 1</div>
</div>
<div id="content">Content</div>

---

By forgetting the "clearDiv" you will get the effect you had before, overlapping the content with the floated columns.
See, your "nav" div stays 0px height when adding floated column divs to the top left corner of "nav", they are just stick in front of your view. However, when adding the "clearDiv" you add a div below the left-floated divs without being sticked in front of your view, so the cleared div will be a view-part of "nav" that will force "nav" to increase the height to get enough space for "clearDiv" and tada ... the "content"-div will go down. I hope this helped anyway.

About your new problem:
Imagine in the example I gave above my "nav"-div would have only 250px width? What will happen with three 100px-width column child divs? Yes, they will cry due too less space. To be more exact the last column child div will be word wrapped to the next line (as you can see in your screenshot).
As first I suggest you to float all your childs to the left.
As second I suggest you to take care of your available width and make sure you do not take too much on your childs:

Your parents content area (width) must not be smaller than all your childs complete size (margin-left + border-left + padding-left + width + padding-right + border-right + margin-right)

http://www.w3.org/TR/CSS2/images/boxdim.png

Oh well, I like specific questions, we are not here to fix whole problems, we are?
I would never read a source that is longer than 15-20 lines, I do not like problem dumps, the screenshot is a way better. Matt should solve his problem on his way by understanding and finding the solution in own effort. This way it will stay in his head a pretty neat way. :3

---

Hi, thanks for your input to the problem, I have tried your solution but yet still have a problem with it. I've floated all my divs to the left and have made my clear the same as you would usually but it doesn't seem to want to work. If you have any other solution it'd be greatly admired.

Many thanks,

Matt

There is auto clear too. You have to apply it to the PARENT in which you floated the div. And it goes like this

PHP Code:

---

.parentdiv {
overflow:hidden;
zoom:1;
} 


---

I have cleared up some of your dirty coding , also I suggest using 960's grid system since your positioning sucks , this still does not solve the problem through. I am trying hard , but I have no idea what causing it. First i thought its because the p element is inline , but that's not the case. If I come up with something Ill tell you.

PHP Code:

---

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <link href="styles.css" rel="stylesheet">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <div class="theWrapper container_12"> <!-- container_12 , grid_4 are part of 960 grid -->
        <div class="mainButtons greenGradient grid_4">
            <div class="theTitles trigger">Book Lessons Now</div>
            <div class="toggle">
                <input type="text" placeholder="First Name" /><br />
                <input type="text" placeholder="Last Name" /><br />
                <input type="number" placeholder="Phone Number" /><br />
                <input type="email" placeholder="E-Mail Address" /><br />
                <button>Send Inquiry</button>
            </div>
        </div>
        <div class="mainButtons redGradient grid_4">
            <div class="theTitles trigger">View Our Feed</div>
            <div class="toggle">
                <div><p>Loading Social Feeds...</p></div>
            </div>
        </div>
        <div class="mainButtons blueGradient grid_4">
            <div class="theTitles trigger">Got a Question?</div>
            <div class="toggle">
                <p>Loading Contact Page...</p>
            </div>
        </div>

        <script>
            $(".toggle").slideUp();
            $(".trigger").click(function(){
                $(this).next(".toggle").slideToggle("slow");
              });
        </script>
    </div>
    <div class="container_12">
        <div class="somecontent grid_12"></div>
    </div>
</body>
</html> 


---

PHP Code:

---

@import url('960.css'); /* get it from 960.gs */
.theWrapper {
    margin-bottom: 15px;
    text-shadow: 0px 1px 2px #000;
}
.mainButtons { width: 300px; height: 70px; }
.theTitles {
    height: 70px;
    line-height: 70px;
    text-align: center; /* Old browsers */
    color: #FFF;
    box-shadow: 0px 0px 3px 0px #000;
    border-radius: 5px;
}
.redGradient {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
    background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
    background-color:#fe1a00;
}
.greenGradient {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0) );
    background:-moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');
    background-color:#3d94f6;
}
.blueGradient {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #89c403), color-stop(1, #77a809) );
    background:-moz-linear-gradient( center top, #89c403 5%, #77a809 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809');
    background-color:#89c403;
}
.theTitles:hover {
    cursor: pointer;
}
.toggle {
    text-align: center;
    display: none;
    background-color: #FFF;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    box-shadow: 0px 0px 3px 0px #000;
    border-radius: 5px;
}
.theTitles input {
    width: 90%;
    border: solid 1px #ccc;
    padding: 3px;
    margin: 5px 0px;
}
.somecontent { height:50px; background:#ccc; }
.clear { clear:both; } 


---

You don't need to manully style the same div over and over just to toggle it , when you can create one div , and toggle it with any button yet still have different content in it , like so

PHP Code:

---

        <script>
            $(".toggle").slideUp();
            $(".trigger").click(function(){
                $(this).next(".toggle").slideToggle("slow");
              });
        </script> 


---

Quote:

---

Just put it online somewhere, makes it way easier to fix than when you just post half of your code here.

---

Quote:

---

Like I said previously, there is no need for me to do that. I've posted the necessary parts of which is causing my error, the container and the content inside the container. Don't mean to be offensive, but if you're good at what you know, you'd understand what the displayed code does and possibly how it can be fixed. - Again, did not mean that to be offensive.

---

If you did it would allow people to test the code properly. :blushing: Just saying

By the way , the way I made your CSS lessen with about 20 lines , its easier to debug , and actually find out where the problem is , since all the buttons use the same classes , and same properties.

Quote:

---

Originally Posted by mucski

By the way , the way I made your CSS lessen with about 20 lines , its easier to debug , and actually find out where the problem is , since all the buttons use the same classes , and same properties.

---

I've not tested your solution out, the buttons all have different classes, but have the same parameters, yes. For example; I have "fastOptionBookTitle", then the others are different. I then set this in the jQuery, so surely that isn't the problem.

Edit:

I have made a JS Fiddle if anyone wants to try what the problem is?:

http://jsfiddle.net/tgvbE/

--

mucski, I copied your code into a new document folder with no modifications.

This is the outputting error:
http://prntscr.com/1dsept

Thank you for your input to the matter anyhow, and if you do come up with something which may fix it it'd be much appreciated.

Anyone else with some suggestions, I'd be exceedingly grateful,

Many thanks,

Matt

Tbh that's really what I needed :D

mucski, I think he understands that that grid layout is really useful (also looked at their fluid version of it - very nice!), but I don't know whether Matt can revamp his entire website at this point. Let's just help him specifically. But thanks from me anyways for that link!

Edit this Fiddle - jsFiddle

Does the trick for me. I've generalized all your CSS and JS. No more excessive lines of CSS to accomplish the same thing, and best of all: it seems to work with the clearing and stuff (I used the overflow method).

Quote:

---

Originally Posted by EliteGM

Tbh that's really what I needed :D

mucski, I think he understands that that grid layout is really useful (also looked at their fluid version of it - very nice!), but I don't know whether Matt can revamp his entire website at this point. Let's just help him specifically. But thanks from me anyways for that link!

Edit this Fiddle - jsFiddle

Does the trick for me. I've generalized all your CSS and JS. No more excessive lines of CSS to accomplish the same thing, and best of all: it seems to work with the clearing and stuff (I used the overflow method).

---

This is perfect, thanks Elite, I really appreciate it!

A big thanks to all the other people who attempted to fix my error aswell, thank you!

Many thanks, again,

Matt =)

Quote:

---

Originally Posted by Matt Clarke

I've not tested your solution out, the buttons all have different classes, but have the same parameters, yes. For example; I have "fastOptionBookTitle", then the others are different. I then set this in the jQuery, so surely that isn't the problem.

Edit:

I have made a JS Fiddle if anyone wants to try what the problem is?:

Edit this Fiddle - jsFiddle

--

mucski, I copied your code into a new document folder with no modifications.

This is the outputting error:
Screenshot by Lightshot

Thank you for your input to the matter anyhow, and if you do come up with something which may fix it it'd be much appreciated.

Anyone else with some suggestions, I'd be exceedingly grateful,

Many thanks,

Matt

---

Seems it did not act that way I expected. It did not increase the parent div height in js runtime.

Interesting solution you offered EliteGM, what was the exact way you told .mainFastOptionContainer to increase the height on runtime? :o