Position elements underneath each other

Question

I am having trouble placing elements in my HTML directly underneath each other using float in the CSS .

What I have done is created a container class for my div and then placed a button and another div inside the container both with the CSS styling float: right; .

What I expected to happen is this.

And what actually happened was this.

---

The Code

HTML

<div class = "containDebug">
    <button id="btn_debug"><p>D</p></button>

    <div id="console_debug">
        <h1>Page Array</h1>
        <pre> Some text from PHP code </pre>
        <h1>GET</h1>
        <pre> Some text from PHP code </pre>
        <h1>POST</h1>
        <pre> Some text from PHP code </pre>
    </div>
</div>

SCSS

#console_debug {
    float: right;
    width: 40vw;
    height: 80vh;
    overflow-y: scroll;
    background-color: #FFFFFF;
    box-shadow: -2px 2px 5px #CCCCCC;

    pre {
       word-break: break-all;
       white-space:normal;
    }
}

#btn_debug{
    float: right;
}

.containDebug {
  position: absolute;
  top: 5px;
  right: 5px;
}

JavaScript

$(document).ready(function() {
    $("#console_debug").hide();
    $("#btn_debug").click(function() {
        event.stopPropagation();
        $("#console_debug").toggle();
    });
});

$(document).click(function() {
    if(!$(event.target).closest('#console_debug').length) {
        if($('#console_debug').is(":visible")) {
            $('#console_debug').hide();
        }
    }
});

---

JSFiddle

I made a JSFiddle so that you could see the code in action.

I appreciate any help in fixing this problem.

Answer 1

See this Fiddle:

https://jsfiddle.net/tobyl/3s29ta79/

I have wrapped the button in a div with the class of .clearfix , and added the CSS to the top of the stylesheet.

This method ensures that a floated element doesn't affect the elements below or around it.

Answer 2

Try this Remove float:right; and add text-align:right; for .containDebug and text-align:left; for #console_debug

 $(document).ready(function() { $("#console_debug").hide(); $("#btn_debug").click(function() { event.stopPropagation(); $("#console_debug").toggle(); }); }); $(document).click(function() { if(!$(event.target).closest('#console_debug').length) { if($('#console_debug').is(":visible")) { $('#console_debug').hide(); } } }); 

 #console_debug { width: 40vw; height: 80vh; overflow-y: scroll; background-color: #FFFFFF; box-shadow: -2px 2px 5px #CCCCCC; text-align:left; pre { word-break: break-all; white-space:normal; } } .containDebug { position: absolute; top: 5px; right: 5px; text-align:right; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class = "containDebug"> <button id="btn_debug"><p>D</p></button> <div id="console_debug"> <h1>Page Array</h1> <pre> Some text from PHP code </pre> <h1>GET</h1> <pre> Some text from PHP code </pre> <h1>POST</h1> <pre> Some text from PHP code </pre> </div> </div> 

Answer 3

The simplest thing to do would be to wrap your button in a <div> .

Since you are floating both the button and the console DIV they will appear next to one another instead of one on top of one another. By having two DIVs as the child of .containDebug they will both take up the full width of their container elements since they are block level elements.

 $("#btn_debug, #console_debug").click(function(e) { e.stopPropagation(); $("#console_debug").toggle(); }); 

 #console_debug { display: none; width: 40vw; height: 80vh; overflow-y: scroll; background-color: #FFFFFF; box-shadow: -2px 2px 5px #CCCCCC; pre { word-break: break-all; white-space: normal; } } #btn_debug { float: right; } .containDebug { position: absolute; top: 5px; right: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="containDebug"> <div> <button id="btn_debug">Button</button> </div> <div id="console_debug"> <h1>Page Array</h1> <pre> Some text from PHP code </pre> <h1>GET</h1> <pre> Some text from PHP code </pre> <h1>POST</h1> <pre> Some text from PHP code </pre> </div> </div> 

Another option would be to clear the floated button.

 $("#btn_debug, #console_debug").click(function(e) { e.stopPropagation(); $("#console_debug").toggle(); }); 

 #console_debug { display: none; clear: both; width: 40vw; height: 80vh; overflow-y: scroll; background-color: #FFFFFF; box-shadow: -2px 2px 5px #CCCCCC; pre { word-break: break-all; white-space: normal; } } #btn_debug { float: right; } .containDebug { position: absolute; top: 5px; right: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="containDebug"> <button id="btn_debug">Button</button> <div id="console_debug"> <h1>Page Array</h1> <pre> Some text from PHP code </pre> <h1>GET</h1> <pre> Some text from PHP code </pre> <h1>POST</h1> <pre> Some text from PHP code </pre> </div> </div> 

Note: I simplified your JS by setting #console_debug to display: none; by default and letting jQuery's toggle() handle the display of it, whether you click on the button or the console. No reason to hide it with JS and test for it's visibility. Let jQuery and toggle() do the work for you.

Answer 4

Add "clear: both;" to your #console_debug. http://www.w3schools.com/cssref/pr_class_clear.asp

Answer 5

Add clear: both; to #console_debug