CODEWITHSUNDEEP
htmlcss
Dan
Dan

Reputation: 7724

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.

Upvotes: 1

Views: 1559

Answers (5)

hungerstar
hungerstar

Reputation: 21675

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.

Upvotes: 1

DigitCart
DigitCart

Reputation: 3000

Add clear: both; to #console_debug

Upvotes: 0

James Manges
James Manges

Reputation: 158

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

Upvotes: 0

Ankit
Ankit

Reputation: 1114

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>

Upvotes: 1

Toby
Toby

Reputation: 13375

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.

Upvotes: 1

Related Questions