Dan Dan - 4 months ago 14
CSS Question

Position elements underneath each other

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.

enter image description here

And what actually happened was this.

enter image description here




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

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. No reason to hide it with JS and test for it's visibility. Let jQuery and toggle() do the work for you.