Member Avatar for alexgrover

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>
  • 4 Contributors
  • 6 Replies
  • 6K Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by LearnTheNew

Recommended Answers

All 6 Replies

Member Avatar for gentlemedia

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 by gentlemedia
Member Avatar for alexgrover

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.

Member Avatar for gentlemedia

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 by gentlemedia
Member Avatar for gentlemedia

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;
}
Member Avatar for akhtar.web

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>
Member Avatar for LearnTheNew 
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>
Edited by happygeek because: fake sig removed, use the sig facility provided
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.