CODEWITHSUNDEEP
javascripthtmlcss
Ben
Ben

Reputation: 92

p element stuck to divs?

This is a super weird problem. Probably caused by something stupid in my HTML or CSS. I'm learning javascript currently, and I'm making a super simple webpage that demonstrates the dragging ability of javascript. I have two divs, one that floats left and one right, and a p element that should be below the divs. The problem is, I can't separate them. The border of the p element extends into the divs for some reason. I've tried messing with the height of the p element, but then the border isn't even around the text—it's in the divs. I've also tried separating them with margin-top on the p element and that brings the divs down with it. So the elements seem stuck together and I truly don't know why. Here is my code:

  var dropzone = document.getElementById("dropzone");
  var dropzone2 = document.getElementById("dropzone2");
  var text = document.getElementById("text");

  var dragging = null;
  var wheredrop = null;

  function dragover(e){
      wheredrop = e.target;
  }

  function dragend(e){
      wheredrop.appendChild(dragging);
      wheredrop = null;
      dragging = null;
  }

  function drag(e){
      dragging = e.target;
  }

  text.ondragstart = drag;
  text.ondragend = dragend;
  dropzone.ondragenter = dragover;
  dropzone2.ondragenter = dragover;
  document.body.ondragenter = dragover;
<!DOCTYPE html>
<html>
    <head>
        <title>Test Drag</title>
    </head>
    <body>
        <div id="dropzone" style="border: 1px solid black; width: 49.85%; height: 300px; float: left; margin-top: -50px;"></div>
        <div id="dropzone2" style="border: 1px solid green; width: 49.85%; height: 300px; float: right; margin-top: -50px;"></div>
        <p id="text" draggable="true" style="border: 1px solid pink; margin-top: 150px;">This is text to drag.</p>
    </body>
</html>

Upvotes: 1

Views: 90

Answers (2)

Rishi Malviya
Rishi Malviya

Reputation: 77

You can solve this by clearing the float. Add this <div style="clear: both;"></div> between second/last div and p element. This will clear the effect of float after the divs.

<div id="dropzone" style="border: 1px solid black; width: 49.85%; height: 300px; float: left; margin-top: -50px;"></div>
<div id="dropzone2" style="border: 1px solid green; width: 49.85%; height: 300px; float: right; margin-top: -50px;"></div>
<div style="clear: both;"></div>
<p id="text" draggable="true" style="border: 1px solid pink; margin-top: 150px;">This is text to drag.</p>

Upvotes: 1

doj
doj

Reputation: 156

You can add a property into your styles display:inline-block .I think it will solve both your issue it will be below div and the border of p would only take the size of the text

Upvotes: 2

Related Questions