Items on my webpage keep shifting when I resize the windows

Question

The elements in my Html document keep shifting when I resize my browser.It shifts when I resize it and when I drag the window across to an external display. I want the elements to stay where they are when I resize the window, any help would be greatly appreciated.

Here's the HTML code:

<!DOCTYPE HTML>
<html>
<head>
  <title>Udarit.com/home</title>
  <link href= "MissionImpossible2.css"
      rel="stylesheet"
      type="text/css">
</head>
<body>
  <div id="away"> 
    <button id="fix">LOGIN</button>
  </div>  
  <div id="break">
  <div id="lose">
  <form class= you>
    <input id= nuke
           type="search"
           class="searchterm"
           placeholder="search">
   <button id="mama">
   <img id= "reap"
        class="search-icon"
        src="1499177797_Search.svg">
   </button>
 </form>   
 </div>
 </div>
  </body>
</html>

Here's the CSS:

*{margin:0; padding:0;box-sizing:border-box;}
 #nuke {width:500px;
  height: 50px;
position: relative;
top:50%;
left:30%;
border-style:outset;
border-color:gainsboro;
border-radius: 5px;
background-color:ghostwhite;
}
#reap{position: relative;
            height:30px;
            border-radius: 10px;
border-style: none;
            }

#mama{position: relative;
height: 47px; 
width:40px;
top:10px;
  left: 19.5em;
  border-style: none;
background-color: rgba(0,0,0,0.1);
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;}

#hey{width: 180px;
 position: relative;
right:480px;
top:5px;}

#break{position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color:aqua;
background: rgba(51,51,51,0.7);
background-image:url("");
}

#lose{position: relative;
top:50%;}

#away{border-style:hidden;
  height:80px;
 background-color: aqua;
 background-color:rgba(0,0,0,0.1);
  z-index: 1;}

#fix{width:100px;
height: 40px;
position: relative;
left:900px;
top:20px;
color:white;
background-color:blue;
z-index:10;
border-style:none;
border-radius:10px;
font-family:monospace; 
 }

Please explain why this is happening and how to prevent it, for future purposes.

Answer 1

This is down to the positioning of your elements on the page. The log in button is staying put because you're positioning it using pixels.

Your form input element is moving around because you have used percentages to position it on the page.

If you'd like your webpage to work on different screen sizes its a good idea to lay out elements more fluidly. For example you could pin your log in button to stay to the right of any browser window by using position: absolute and right: 0 for example.

You can also have a fixed width web page but center it in the middle, a little like StackOverflow does on it's desktop view. You can do this by creating a div with a fixed with and then applying margin: 0 auto to the div and putting elements within, like a container if you like.

Items on my webpage keep shifting when I resize the windows

Question

1 answers

solution1
0 2017-07-23 16:09:57

Items on my webpage keep shifting when I resize the windows

Question

1 answers

solution1 0 2017-07-23 16:09:57

solution1
0 2017-07-23 16:09:57