CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3394907
user3394907

Reputation: 131

How to prevent dynamically appended div from overflowing?

So I'm trying to dynamically append a bunch of div elements containing words to my page (each has the .magnet class). However, many of them end up spilling outside the boundaries of the container, and I cannot figure out how to stop that from happening. If anyone could take a look at my jsfiddle and help me out, I would be very appreciative. I've also included my css code for the container below. JsFiddle Example

body {
margin:0 auto;
overflow:hidden;
}
#container {
background-color: #446b81;
}

.magnet {
width:45px;
background-color: #FFFFFF;
padding:5px 25px;
font-family: Times;
font-size: 16px;
border:1px outset;
position:absolute;
}

Upvotes: 0

Views: 600

Answers (2)

nowhere
nowhere

Reputation: 1548

Why don't you reduce the document width and height by some values? (50 and 100 are just random numbers but you can fix them with the exact size of the divs).

   testsub.css("top",Math.floor(Math.random() * ($(document).height()-50)));
   testsub.css("left",Math.floor(Math.random() * ($(document).width()-100)));

Updated fiddle: https://jsfiddle.net/mszvbfoe/5/

Upvotes: 2

Nathan
Nathan

Reputation: 125

Put overflow:hidden; inside your container and fix the width for your container

#container 
{
    background-color: #446b81;
    overflow:hidden;
    width:500px;
}

Upvotes: -1

Related Questions