How to prevent divs overlapping when window size changes?
Question
Basically, when the browser is maximized, everything falls into place as I intended. However, resizing the window make my divs overlap. I've tried many posts on here with similar problem but non of the other posts have helped so I am posting my own code.
CODE:
$(document).ready(function(){ for(var i = 1; i <= (32*16); i++){ $('.container').append("<div class=\\"squares\\" ></div>"); } var $sqrs = $('.squares'); $sqrs.height("32px"); $sqrs.width("32px"); $sqrs.css("background", "#969696"); $sqrs.css("float", "right"); $sqrs.css("border-style", "solid"); $sqrs.css("border-width", "0"); $sqrs.on("mouseenter", function(){ $(this).addClass("sqr1"); $('.sqr1').css("background", "grey"); }); $('.item').click(function(){ var numSqrs = parseFloat(prompt("How many squares do you want? (1-")); }) })
body{ width: 100%; margin: auto; } .wrap{ margin-left:auto; margin-right:auto; width:100%; display: inline-block; } .top { position: relative; top: 0; left: 0; z-index: 999; width: 100%; height: 55px; border-bottom: 1px solid #A3A3A3; -webkit-box-shadow: -1px 2px 12px 0px rgba(0,0,0,0.15); -moz-box-shadow: -1px 2px 12px 0px rgba(0,0,0,0.15); box-shadow: -1px 2px 12px 0px rgba(0,0,0,0.15); display: inline-flex; } .bottom{ margin-left:auto; margin-right:auto; width:100%; position:relative; display: inline-flex; height: auto; } .container{ height: 512px; width:1024px; position: fixed; left:20%; border: 1px solid #A3A3A3; top: 10%; -webkit-box-shadow: 28px 36px 73px -13px rgba(0,0,0,1); -moz-box-shadow: 28px 36px 73px -13px rgba(0,0,0,1); box-shadow:28px 36px 73px -13px rgba(0,0,0,1); } #proj{ margin-left: 150px; } .head{ width: 30px; height: 30px; margin: 5px; } .parent{ position: absolute; left: 30%; right: 50%; top: 20%; } .etc{ margin: 0; padding:0; } #box{ width: 40px; height: 40px; background: black; margin: 8px; border-radius: 40px; } .Odin{ padding-bottom: 10px; margin-right: 20px; font-size: 20px; font-weight: 200; font-variant: small-caps; letter-spacing: 1px; color: black; } .menu{ height: 100%; width: 200px; position: fixed; top: 8.2%; left: 0; float: left; margin:0; border: 1px solid #A3A3A3; border-top: none; -webkit-box-shadow: -1px 2px 12px 0px rgba(0,0,0,0.15); -moz-box-shadow: -1px 2px 12px 0px rgba(0,0,0,0.15); box-shadow: -1px 2px 12px 0px rgba(0,0,0,0.15); display: inline-flex; } .menu{ display: inline-block; margin: 0; padding: 20px; } .item{ height: 50px; width: 100%; margin: 0; padding: 0; display: inline-flex; } .item:hover{ height: 50px; width: 100%; background-color: #A7A3A3; margin: 0; padding: 0; display: inline-flex; cursor: pointer; } .item1{ float: right; margin-left: 20px; padding-top: 13px; font-size: 20px; font-weight: 200; font-variant: small-caps; letter-spacing: 1px; color: black; } #trash{ padding: 15px; margin: 1px; }
<!DOCTYPE html> <html> <head> <title>Javascript/jQuery Project</title> <link rel="stylesheet" type="text/css" href="styles/main.css"/> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="scripts/jquery-1.0.min.js"></script> </head> <body> <div class="wrap"> <div class="top"> <div id="box"> <img class="head" src="images/odin_head.png"/> </div> <p class="Odin">The Odin Project</p> <p id="proj" class="Odin">Harsimran Mann's Etch-A-Sketch Project</p> </div> <div class="bottom"> <div class="scd"> <div class="menu"> <div class="item"> <img id="trash" src="images/grid-four-up-2x.png"/> <span class="item1"> New Grid </span> </div> <div class="item"> <img id="trash" src="images/trash-2x.png"/> <span class="item1"> Clear </span> </div> </div> <div class="container"></div> </div> </div> </div> </body> </html>
2 answers
solution1
-1 2016-08-26 09:33:31
Have you tried media queries (like below) for that,
@media all and (max-width: 359px) and (min-width: 300px){
}
@media all and...
solution2
-2 2016-08-26 09:34:05
Use media queries for making it responsive. If you find it difficult try giving width and height in % instead of px. % calculates height and width based on Window size.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to prevent overlapping two bootstrap styled divs which can re-size and drag?
How to prevent divs from moving when window resizes?
How to set a position that changes when the window size changes
Containers overlapping when size of window is small
How do I change the function of a button when the window size changes?
How to change a position of element when a window size changes?
Simple Modal autoresize when window size changes
How to make 2 divs that are inside one “top panel” but in different cornes not to overlap one another when window size is changed?
How do I resize an IMG element so that it is proportionately in the same place on the window when the window size changes?
Jquery Resizable: Prevent overlapping divs on Resize
Related Tags