Header moves on windows resize - css

Question

When ever I re-size the window the header moves leaving a space on the right side. (Refer to image ). If I shrink the window horizontally even more the gap increases. I have only been able to fix this problem by making the position for header to fixed but then the text overlaps. I want the header to move with the vertical scroll. Any help on here where I am going wrong is highly appreciated.
*{
padding:0;
margin:0 auto;
font-family: 'Museo Slab 300';
}
html{
background: url("Images/backlines.png") no-repeat center center fixed;
}
.company-header {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,color-stop(0, rgb(226, 226, 226)),color-stop(0, rgb(254, 254, 254)),color-stop(0.1, rgb(254, 254, 254)),color-stop(1, rgb(219, 219, 219)),color-stop(1, rgb(209, 209, 209)));
height: 140px;
box-shadow: 0px 2px;
position: absolute;
width: 100%;
top: 0px;
}
.company-footer{
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: left;
z-index:-1;
box-shadow: 0px -4px rgba(0, 173, 239, 1);
}
img#logo-image {
position: absolute;
left: 270px;
}
div#setting-dropdown {
position: relative;
float: right;
right: 250px;
top: 58px;
}
div#setting-dropdown-content {
display: none;
background: rgba(0, 173, 239, 1);
width: 196px;
margin-left: -70px;
padding: 4px 5px 5px 7px;
}
div#setting-dropdown-content a {
color: white;
text-decoration: none;
font-size: 16px;
font-family: 'Museo Slab 300';
display: inline-block;
}
div#setting-dropdown i {
display: inline-block;
padding: 5px;
padding-right: 7px;
text-align: center;
border-radius: 10px 10px 0 0;
padding-bottom: 10px;
color: rgba(0, 173, 239, 1);
}
div#setting-dropdown:hover i {
background-color: rgba(0, 173, 239, 1);
color:white;
}
#setting-dropdown:hover #setting-dropdown-content {
display:block;
}
p#setting-dropdown {
font-size: 20px;
font-weight: bold;
}
button#company-logout {
background: rgba(255, 255, 255, 1);
border: none;
border-radius: 40px 40px 40px 40px;
width: 135px;
height: 40px;
font-size: 19px;
font-weight: 900;
font-family: 'Museo Slab 700';
float: right;
top: 54px;
right: -40px;
position: relative;
}
div#log-in {
position: relative;
top: 200px;
}
div#welcome-text {
margin-left: 276px;
font-family: 'Museo Slab 300';
font-size: 22px;
}
div#loginHeader {
margin-top: 60px;
margin-left: 276px;
}
div#dropdown-main-content {
position: relative;
top: 230px;
left: 276px;
display: inline-flex;
}
.dropdown {
position: relative;
width: 11em;
top: 60px;
right: 260px;
}
.dropbtn {
color: white;
width: 100%;
height: 3.2em;
font-size: 16px;
border: none;
text-align: start;
font-weight: 900;
background: rgba(0, 173, 239, 1);
border-radius: 50px 50px 50px 50px;
-moz-border-radius: 0px;
z-index: 2;
text-indent: 23px;
}
.dropdown-content {
display: none;
z-index: -1;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
margin-top: -64px;
width: 176px;
}
.dropdown a {
background:url("Images/sidearrow.png") no-repeat 7px;
}
.dropdown-content a {
color: black;
padding: .75em;
text-decoration: none;
display: block;
border: 1px solid #000;
border-top: none;
text-indent: 12px;
width: 150px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.dropdown-content a:hover {
background:url("Images/sidewhite.png") no-repeat 3px;
background-color: rgb(255,131,0);
color:white;
font-weight:900;
}
.dropdown-content a:first-child {
padding-top: 35px;
background: url("Images/sidearrow.png") no-repeat 7px 36px;
}
.dropdown-content a:first-child:hover {
background: url("Images/sidewhite.png") no-repeat 3px 36px;
color:white;
background-color: rgb(255,131,0);
font-weight:900;
}
img#sphere {
position: relative;
width: 35px;
height: 34px ;
left: 133px;
bottom: 42px;
}
img#sphere-arrow {
position: relative;
bottom: 44px;
left: 99px;
}
div#login-form {
margin-top: 100px;
margin-left: 276px;
}
.page-label {
font-size: 19px;
}
button#loginSubmit {
margin-top: 75px;
background: rgba(0, 173, 239, 1);
border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 40px 40px 40px 40px;
width: 185px;
height: 60px;
font-size: 20px;
font-family: sans-serif;
color: white;
font-weight: 900;
border: none;
position: absolute;
margin-left: 278px;
}
div#login-landingpage{
margin-left: 276px;
margin-top: 90px;
}
select.security-questions {
width: 450px;
height: 40px;
font-weight: bold;
}
.security-question-labels {
font-size: 21px;
font-family: 'Museo Slab 300';
}
<!DOCTYPE html>
<html>
<head>
<title>Averios</title>
<link rel="stylesheet" type="text/css" href="test.css">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
<meta charset="utf-8">
</head>
<body>
<div class="company-header">
<img id="averios-logo-image" src="Images/averioslogo.png" width="176" height="129">
<div id="setting-dropdown">
<!-- SETTING DROPDOWN WILL GO HERE -->
<p id="setting-dropdown"> SETTINGS <i class="ion-chevron-down"></i></p>
<div id="setting-dropdown-content">
Change Password
Change Security Settings
</div>
</div>
<button id="company-logout"> LOGOUT </button>
</div>
<div id="log-in">
<div id="loginHeader">
<h1>Portal</h1>
</div>
<br>
<br>
<div id="welcome-text">
<p> Welcome name </p>
<p> Your last login was time on date </p>
<br>
<p> Please select an application below to begin </p>
</div>
</div>
<div id="dropdown-main-content">
<img id="pulse-image" src="C:\Users\user\Desktop\Final-Designs\Images\pulse.png" width="320" height="50" alt=""/>
<div id="dropdown-one">
<div class="dropdown">
<button class="dropbtn">SELECT</button>
<img id="sphere" src="C:\Users\user\Desktop\Final-Designs\Images\sphere.png" alt=""/>
<img id="sphere-arrow" src="C:\Users\user\Desktop\Final-Designs\Images\arrow.png" alt=""/>
<div class="dropdown-content">
option0
option1
</div>
</div>
</div>
<!-- SENTINAL -->
<img id="sentinal-image" src="C:\Users\user\Desktop\Final-Designs\Images\sentinal.png" width="380" height="50" alt=""/>
<div id="dropdown-second">
<div class="dropdown">
<button class="dropbtn">SELECT</button>
<img id="sphere" src="C:\Users\user\Desktop\Final-Designs\Images\sphere.png" alt=""/>
<img id="sphere-arrow" src="C:\Users\user\Desktop\Final-Designs\Images\arrow.png" alt=""/>
<!--<div class="sphere-two">
<div id="arrow-two">
<img src="C:\Users\user\Desktop\Images\arrow.png" width="29" height="27" alt=""/>
</div>
</div>-->
<div class="dropdown-content">
option0
option1
</div>
</div>
</div>
</div>
<div class="company-footer">
<div id="footer-text">
© 2016 Company, All Rights Reserved.
</div>
</div>
</body>
</html>

Answer 1

Problem is
div#dropdown-main-content {
position: relative;
top: 230px;
left: 276px;
display: inline-flex; }
try to remove display to inline and left to 0 like this
div#dropdown-main-content {
position: relative;
top: 230px;
display: inline; }
also remove fixed widths from images and divs, try to use max-width.
update
*{
padding:0;
margin:0 auto;
font-family: 'Museo Slab 300';
}
html{
background: url("Images/backlines.png") no-repeat center center fixed;
}
.averios-header {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,color-stop(0, rgb(226, 226, 226)),color-stop(0, rgb(254, 254, 254)),color-stop(0.1, rgb(254, 254, 254)),color-stop(1, rgb(219, 219, 219)),color-stop(1, rgb(209, 209, 209)));
height: 140px;
box-shadow: 0px 2px;
position: absolute;
width: 100%;
top: 0px;
}
.averios-footer{
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: left;
z-index:-1;
box-shadow: 0px -4px rgba(0, 173, 239, 1);
}
img#averios-logo-image {
position: absolute;
left: 270px;
}
div#setting-dropdown {
position: relative;
float: right;
right: 250px;
top: 58px;
}
div#setting-dropdown-content {
display: none;
background: rgba(0, 173, 239, 1);
width: 196px;
margin-left: -70px;
padding: 4px 5px 5px 7px;
}
div#setting-dropdown-content a {
color: white;
text-decoration: none;
font-size: 16px;
font-family: 'Museo Slab 300';
display: inline-block;
}
div#setting-dropdown i {
display: inline-block;
padding: 5px;
padding-right: 7px;
text-align: center;
border-radius: 10px 10px 0 0;
padding-bottom: 10px;
color: rgba(0, 173, 239, 1);
}
div#setting-dropdown:hover i {
background-color: rgba(0, 173, 239, 1);
color:white;
}
#setting-dropdown:hover #setting-dropdown-content {
display:block;
}
p#setting-dropdown {
font-size: 20px;
font-weight: bold;
}
button#averios-logout {
background: rgba(255, 255, 255, 1);
border: none;
border-radius: 40px 40px 40px 40px;
width: 135px;
height: 40px;
font-size: 19px;
font-weight: 900;
font-family: 'Museo Slab 700';
float: right;
top: 54px;
right: -40px;
position: relative;
}
div#log-in {
position: relative;
top: 200px;
}
div#welcome-text {
margin-left: 276px;
font-family: 'Museo Slab 300';
font-size: 22px;
}
div#loginHeader {
margin-top: 60px;
margin-left: 276px;
}
div#dropdown-main-content {
position: relative;
top: 230px;
display: inline-block;
text-align: center;
width: 100%;
}
.dropdown {
position: relative;
width: 11em;
top: 60px;
}
.dropbtn {
color: white;
width: 100%;
height: 3.2em;
font-size: 16px;
border: none;
text-align: start;
font-weight: 900;
background: rgba(0, 173, 239, 1);
border-radius: 50px 50px 50px 50px;
-moz-border-radius: 0px;
z-index: 2;
text-indent: 23px;
}
.dropdown-content {
display: none;
z-index: -1;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
margin-top: -64px;
width: 176px;
}
.dropdown a {
background:url("Images/sidearrow.png") no-repeat 7px;
}
.dropdown-content a {
color: black;
padding: .75em;
text-decoration: none;
display: block;
border: 1px solid #000;
border-top: none;
text-indent: 12px;
width: 150px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.dropdown-content a:hover {
background:url("Images/sidewhite.png") no-repeat 3px;
background-color: rgb(255,131,0);
color:white;
font-weight:900;
}
.dropdown-content a:first-child {
padding-top: 35px;
background: url("Images/sidearrow.png") no-repeat 7px 36px;
}
.dropdown-content a:first-child:hover {
background: url("Images/sidewhite.png") no-repeat 3px 36px;
color:white;
background-color: rgb(255,131,0);
font-weight:900;
}
img#sphere {
position: relative;
width: 35px;
height: 34px ;
left: 133px;
bottom: 42px;
}
img#sphere-arrow {
position: relative;
bottom: 44px;
left: 99px;
}
div#login-form {
margin-top: 100px;
margin-left: 276px;
}
.page-label {
font-size: 19px;
}
input[type="text"] {
background: #EDEDEE;
background : rgba(237, 237, 238, 1);
border-style : Solid;
border-color : #4B4E53;
border-color : rgba(75, 78, 83, 1);
border-width : 1px;
width: 370px;
height: 35px;
font-size: 26px;
}
input[type="password"] {
background: #EDEDEE;
background : rgba(237, 237, 238, 1);
border-style : Solid;
border-color : #4B4E53;
border-color : rgba(75, 78, 83, 1);
border-width : 1px;
width: 370px;
height: 35px;
font-size: 26px;
}
button#loginSubmit {
margin-top: 75px;
background: rgba(0, 173, 239, 1);
border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 40px 40px 40px 40px;
width: 185px;
height: 60px;
font-size: 20px;
font-family: sans-serif;
color: white;
font-weight: 900;
border: none;
position: absolute;
margin-left: 278px;
}
div#login-landingpage{
margin-left: 276px;
margin-top: 90px;
}
select.security-questions {
width: 450px;
height: 40px;
font-weight: bold;
}
.security-question-labels {
font-size: 21px;
font-family: 'Museo Slab 300';
}
button#saveSubmit {
margin-top: 55px;
background: rgba(0, 173, 239, 1);
border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 40px 40px 40px 40px;
width: 170px;
height: 55px;
font-size: 20px;
font-family: sans-serif;
color: white;
font-weight: 900;
border: none;
position: absolute;
margin-left: 278px;
}
button#cancelSubmit {
margin-top: 55px;
background: rgb(75,79,84);
border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 40px 40px 40px 40px;
width: 170px;
height: 55px;
font-size: 20px;
font-family: sans-serif;
color: white;
font-weight: 900;
border: none;
position: absolute;
margin-left: 478px;
}
div#security-form {
margin-top: 60px;
margin-left: 276px;
}
/* TEST */
div#dropdown-col-2 {
display:inline-block;
}
div#dropdown-second {
position: absolute;
left: 1040px;
top: -10px;
}
//HTML
<div class="averios-header">
<img id="averios-logo-image" src="http://lorempixel.com/176/129/"></img>
</a>
<div id="setting-dropdown">
<!-- SETTING DROPDOWN WILL GO HERE -->
<p id="setting-dropdown"> SETTINGS <i class="ion-chevron-down"></i></p>
<div id="setting-dropdown-content">
Change Password
Change Security Settings
</div>
</div>
<button id="averios-logout"> LOGOUT </button>
</div>
<div id="log-in">
<div id="loginHeader">
<h1> Portal</h1>
</div>
<br>
<br>
<div id="welcome-text">
<p> Welcome name </p>
<p> Your last login was time on date </p>
<br>
<p> Please select an application below to begin </p>
</div>
</div>
<div id="dropdown-main-content">
<div id="dropdown-col-2">
<img id="averios-pulse-image" src="http://lorempixel.com/362/46/" alt="" />
<div class="dropdown">
<button class="dropbtn">SELECT</button>
<div class="dropdown-content">
Option1
</div>
</div>
</div>
<!-- SENTINAL -->
<div id="dropdown-col-2">
<img id="averios-sentinal-image" src="http://lorempixel.com/362/46/" alt="" />
<div class="dropdown">
<button class="dropbtn">SELECT</button>
<div class="dropdown-content">
Option1
</div>
</div>
</div>
</div>
<div class="averios-footer">
<div id="footer-text">
© 2016, All Rights Reserved.
</div>
</div>