Results 1 to 5 of 5

Thread: Float Drop Issue...

  1. #1

    Float Drop Issue...

    Hi guys,

    I've built a <div class="container-fluid"> 3 column page with the 2 outside divs (used for ad copy) and a central column to contain the main part of the site.

    The central column in subdivided into a further 3 divs.

    <div class="col-md-3 left_column"></div>

    <div class="col-md-6 enter_column"></div>

    <div class="col-md-3 right_column"></div>

    When I try to add an Accordion Nav to to Left div the Right Ad div is dropping.

    Can't figure out why :-O

    http://southdownswebdesign.solutions...amework_4.html


    Online Rocker

  2. #2
    Quote Originally Posted by Online Rocker View Post
    Hi guys,

    I've built a <div class="container-fluid"> 3 column page with the 2 outside divs (used for ad copy) and a central column to contain the main part of the site.

    The central column in subdivided into a further 3 divs.

    <div class="col-md-3 left_column"></div>

    <div class="col-md-6 enter_column"></div>

    <div class="col-md-3 right_column"></div>

    When I try to add an Accordion Nav to to Left div the Right Ad div is dropping.

    Can't figure out why :-O

    http://southdownswebdesign.solutions...amework_4.html


    Online Rocker
    please put this in a code box and next time

    Code:
    <div class="row-fluid">
    	<div class="col-md-12">
    		<div class="col-md-3"> <!--accordion-->
    		</div>
    		<div class="col-md-6"><!--center-->
    		</div>
    		<div class="col-md-3"><!--right-->
    		<div>
    	</div>
    </div>

  3. #3
    Thanks Disconnected - once I wrapped the 3 divs in <div class="row-fluid"> it was fine - many thanks for the steer

  4. #4
    Quote Originally Posted by Online Rocker View Post
    Thanks Disconnected - once I wrapped the 3 divs in <div class="row-fluid"> it was fine - many thanks for the steer
    the fluid aspect will bring the sides of your website in, if you don't like that and want it full width then just take fluid out, should you ever run into an issue where you get a scroll bar that goes left and right (and there is a big white space on the right side of the page) then add this:

    Code:
    body{
    overflow-x: hidden;
    }
    You can do it for X (horizontal) or Y (Vertical)

  5. #5

    Many thanks for that...

    Hi Disconnected,

    Thanks for the extra info which I was already familiar with...

    I also have a js issue you may have come across before...

    (sorry can't find how to access a Code Box - how do I do this !)

    Here's a code block from my Accordion Nav...

    <!-- Accordion Tab with Dropdowns-->

    <a href="#tab1" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MachineMenu"><span class="glyphicon glyphicon-triangle-right"></span>CNC MILLING<span class="label label-info pull-right machines_available">5</span></a>
    <div class="collapse" id="tab1">
    <a href="#" class="list-group-item pl40">DRILLING &amp; BORING<span class="label label-info pull-right machines_available">5</span></a>
    <a href="#" class="list-group-item pl40">HORIZONTAL<span class="label label-info pull-right machines_available">5</span></a>
    <a href="#" class="list-group-item pl40">OTHER<span class="label label-info pull-right machines_available">5</span></a>
    <a href="#" class="list-group-item pl40">UNIVERSAL<span class="label label-info pull-right machines_available">5</span></a>
    <a href="#" class="list-group-item pl40">VERTICAL<span class="label label-info pull-right machines_available">5</span></a>
    </div>

    <!-- Accordion Tab with Dropdowns END-->

    I use multiple instances of the above code block for each Tab in the Accordion menu with different id="tab1", id="tab2" etc...

    I've been using the following js, but this is causing ALL the class="glyphicon glyphicon-triangle-right" to switch to "glyphicon glyphicon-triangle-bottom" when you click on ANY tab...

    <!-- jQuery to Control Glyphicons in New/Used Machinery Menu -->
    <script>
    $('#MachineMenu').on('shown.bs.collapse', function() {
    $(".glyphicon").removeClass("glyphicon-triangle-right").addClass("glyphicon-triangle-bottom");
    });


    $('#MachineMenu').on('hidden.bs.collapse', function() {
    $(".glyphicon").removeClass("glyphicon-triangle-bottom").addClass("glyphicon-triangle-right");




    });
    </script>

    I can see why this is happening - any ideas on how to modify the js to target ONLY the Tab that is clicked leaving the other Tabs unaffected

    Online Rocker

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •