On window resize, DIV overlap on other div.

Question

alexgrover 0 Newbie Poster

7 Years Ago

Hi,

Simple HTML code with few DIVs. See below the code.
When window resized, One DIV overlaps with other and it looks messy. I could not figure out the problem. I tried to change position to relative and no it overlaps.
Can someone please point out the problem in the code below and provide workable solution. Please first check your solution on your end and then post it here.

<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<div id="clncont0" style="position:absolute; display:inline-block;left:32%;top:23%;padding: 5px; border-image: none; width: auto; height: inherit;">
    <div id="hdrLabel0" style="height: 25px; vertical-align: top; cursor: pointer;">Username</div>
    <input name="box0" id="box0" style="padding: 5px; cursor: pointer;" type="text">
</div>
<div id="clncont1" style="position:absolute; display:inline-block;left:42%;top:23%;padding: 5px; : ; border-image: none; width: auto; height: inherit;">
    <div id="hdrLabel1" style="height: 25px; vertical-align: top; cursor: pointer;">Password</div>
    <input name="box1" id="box1" style="padding: 5px; cursor: pointer;" type="password">
</div>
<div id="clncont2" style="position:absolute; display:inline-block;left:52%;top:23%;padding: 5px; : ; border-image: none; width: auto; height: inherit;">
    <div id="hdrLabel2" style="cursor:pointer; vertical-align: top; height: 25px">Login</div>
    <input name="btn2" id="btn2" style="cursor:pointer;padding:5px;margin:5px;" type="button" value="Send">
    <div id="destination2" style="padding: 5px; display: none; cursor: pointer;"></div>
</div>
</body>
</html>

html-css web-design

4 Contributors
6 Replies
7K Views
1 Month Discussion Span
Latest Post 7 Years Ago Latest Post by LearnTheNew

Dani AI

Generated 11 Months Ago

The overlap happens because absolutely positioned items are taken out of flow, so their intrinsic widths do not push neighbors out of the way as the viewport shrinks. If you need the blocks to be draggable/resizable, you can still avoid overlap without abandoning that UX. Two pragmatic patterns:

Scale a fixed-size canvas. Place all absolutely positioned elements inside a relatively positioned wrapper with a fixed design size, and scale that canvas on resize. This preserves relative positions and prevents collisions.

<div class="canvas-wrap">
  <div id="canvas"><!-- your absolutely positioned fields here --></div>
</div>
<script>
  (function () {
    var designW = 1000, designH = 140; // your design size in px
    var wrap = document.querySelector('.canvas-wrap');
    var canvas = document.getElementById('canvas');
    function fit() {
      var scale = Math.min(wrap.clientWidth / designW, (wrap.clientHeight || Infinity) / designH);
      canvas.style.width = designW + 'px';
      canvas.style.height = designH + 'px';
      canvas.style.transformOrigin = 'top left';
      canvas.style.transform = 'scale(' + scale + ')';
    }
    new (window.ResizeObserver || function(cb){addEventListener('resize', cb); return {observe:function(){cb()}};})(fit).observe(wrap);
  }());
</script>

Note: transform scaling can blur text a bit; test on your target devices.

Recompute absolute positions responsively. Store each block’s left/top/width/height as percentages of the container and recompute on resize so spacing is maintained. Also set sensible min-widths to avoid unreadable inputs.

var wrap = document.getElementById('wrap');
function layout(){
  var w = wrap.clientWidth, h = wrap.clientHeight;
  document.querySelectorAll('.node').forEach(function(el){
    el.style.left = (el.dataset.l * w) + 'px';
    el.style.top = (el.dataset.t * h) + 'px';
    el.style.width = Math.max(160, el.dataset.w * w) + 'px';
  });
}
addEventListener('resize', layout); layout();

Background: MDN: position, MDN: Flexbox, MDN: ResizeObserver.

All 6 Replies

gentlemedia 803 Master Poster

7 Years Ago

Don't use position: absolute to layout your grid or items. The reason they overlap is because absolute postioned elemets are taken out of the normal document flow, which means they don't effect eachother anymore (CSS box model).
There are better methods to layout those divs next to eachoter either with floats, flexbox or grid. It all depends how far back you want/need to support older browsers and/or devices.

For this example I've used flexbox:
https://codepen.io/gentlemedia/pen/oQJbyd

Thus... don't use inline styles... it's messy, you keep repeating yourself and it's hard to maintain. Use an external stylsheet and you have inputs, so use proper label elements and it all should be inside a form element otherwise nothing can be send.

Edited 7 Years Ago by gentlemedia

gentlemedia 803 Master Poster

7 Years Ago

Like I said it's not recommended to use position: absolute and its top and left properties set to percentages to layout elements such as your divs with the input elements. You get into trouble as you've noticed with the overlapping. Anyway don't use position absolute at all for these kind of things

As of in my example wher I've used flexbox to layout the divs, I would stack the divs on smaller screens on top of eachother by setting a flex-direction: column on the form element. And when the screen get's wide enough to layout the divs next to eachother I use a media query (on 500px in this case) to change and set a flex-direction: row on the form element.

So full CSS code would be then:

form {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

label, input {
    display: block;
}

.col:not(:last-child) {
    margin-bottom: 10px;
}

@media screen and (min-width: 500px) {

    form {
        flex-direction: row;
    }

    .col:last-child {
        display: flex;
        align-items: flex-end;
    }

    .col:not(:last-child) {
        margin: 0 5px 0;
    }

}

I've updated the pen, so just resize the browser window to small to see the result.
https://codepen.io/gentlemedia/full/oQJbyd/

Edited 7 Years Ago by gentlemedia

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

alexgrover 0 Newbie Poster · Answer 1 · 2018-12-05T19:51:27+00:00

All DIVs have top and left parameters. This is because, these DIVs are resiziable and moveable. After DIV size and position (left & top) are set, above html code is applied to newly created html page.

Your solution excellent and works without top and left position parameters. Can you suggest somthing that automatically reposition DIVs (with top & left positions) when browser is resized.

gentlemedia 803 Master Poster · Answer 2 · 2018-12-06T11:22:52+00:00

Just a litle update. The CSS for .col:last-child in the media query could be simplified to this:

.col:last-child {
    align-self: flex-end;
}

akhtar.web 0 Newbie Poster · Answer 3 · 2018-12-20T18:50:44+00:00

Hi alexgrover,
I hope this code may be useful, Please check.

<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<div style="text-align:center; padding-top:50vh">
  <div style="margin-top:-27px;">
    <div id="clncont0" style="display:inline-block;padding:0;">
      <div id="hdrLabel0" style="height: 25px; cursor: pointer; text-align:left;">Username</div>
      <input name="box0" id="box0" style="padding: 6px; cursor: pointer; border: solid 1px #ccc;" type="text">
    </div>
    <div id="clncont1" style="display:inline-block;padding:0;margin-left:-5px;">
      <div id="hdrLabel1" style="height: 25px; vertical-align: top; cursor: pointer;text-align:left;">Password</div>
      <input name="box1" id="box1" style="padding: 6px; cursor: pointer; border: solid 1px #ccc;" type="password">
    </div>
    <div id="clncont2" style="display:inline-block;padding:0;margin-left:-4px;">
      <div id="hdrLabel2" style="cursor:pointer; vertical-align: top; height: 25px;text-align:left;">Login</div>
      <input name="btn2" id="btn2" style="cursor:pointer;padding:8px 10px;margin:0; line-height:1; border:none; background-color:#ccc;" type="button" value="Send">
      <div id="destination2" style="padding: 5px; display: none; cursor: pointer;"></div>
    </div>
  </div>
</div>
</body>
</html>

LearnTheNew 0 Newbie Poster Banned · Answer 4 · 2019-01-04T07:04:42+00:00

Check the code:
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<div id="clncont0" style="position:relative; display:inline-block;left:32%;top:23%;padding: 5px; border-image: none; width: auto; height: inherit;">
<div id="hdrLabel0" style="height: 25px; vertical-align: top; cursor: pointer; display:inline-block;">
Username : <input name="box0" id="box0" style="padding: 5px; cursor: pointer;" type="text"></div>
<div id="hdrLabel1" style="height: 25px; vertical-align: top; cursor: pointer; display:inline-block;">  Password : <input name="box1" id="box1" style="padding: 5px; cursor: pointer;" type="password"></div>
<div id="hdrLabel2" style="cursor:pointer; vertical-align: top; height: 25px; display:block;">  
<input name="btn2" id="btn2" style="cursor:pointer;padding:5px;margin:5px;" type="button" value="Login">
</div>
</div>
</body>
</html>

On window resize, DIV overlap on other div.

Dani AI

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers