CODEWITHSUNDEEP
htmlcss
M4DNE55
M4DNE55

Reputation: 49

Stop elements from moving when page is resized CSS

I'd like to know how I can solve an annoying problem : some elements move when I resize my browser window.

I did try using a wrapper and fixed/absolute positions, nothing works.

Here is my CSS Code:

/*Importation polices Debut*/
@font-face {
    font-family: 'OswaldR';
    src: url('fonts/OswaldR.otf');
}

@font-face {
    font-family: 'OswaldS';
    src: url('fonts/OswaldS.otf');
}

@font-face {
    font-family: 'OswaldB';
    src: url('fonts/OswaldB.otf');
}

@font-face {
    font-family: 'OswaldL';
    src: url('fonts/OswaldL.otf');
}
/*Importation polices Fin*/

/*Essentials*/
body {
    background-color:#1F1F1F;
    padding:0;
    margin:0;
}
.wrap {
     width: 95%;
     min-width: 900px;
}

html, body, div {
    overflow-x:hidden;
    }
/*Essentials End*/

/*Header Debut*/
#header {
    position:absolute;
    height:60px;
    min-width:100%;
    background-color:#303030;
}

#header .logo {
    padding-left:10px;
    float:left;
    margin-top:14px;
}

#header .connect {
    margin-top:10px;
    margin-right:10px;
    float:right;
    padding-right:10px;
    height:40px;
    min-width:60px;
    background-color:#000000;
}

#header .connect .links {
    padding-top:10px;
    padding-left:10px;
    font-family:"OswaldB";
    font-size:14px;
    text-transform:uppercase;
}

#header .connect .links a:link {
    color: #454545;
    text-decoration: none;
}

#header .connect .links a:visited {
    color: #454545;
    text-decoration: none;
}

#header .connect .links a:hover {
    color: #FFB335;
    text-decoration: none;
}
/*Header Fin*/

/*Base Debut*/
#base {
    min-height:60%;
    min-width:800px;
    background-color:white;
    top: 40%;
    left: 50%;
    position:fixed;
    transform: translate(-50%, -50%);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

#base .infobox {
    position:fixed;
    margin-left:20px;
    margin-right:20px;
    margin-top:10px;
    border-style: solid;
    border-width: 1px;
    border-color: #C9C9C9;
    vertical-align: middle;
}

(Don't mind the comments, i'm French :p)

And here is the HTML Header and Test page

Header.php:

<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
    <title>Website</title>
    <div id="header">
        <div class="logo">
            <img src="images/logo.png">
        </div>
        <div class="connect">
            <div class="links">
                <a href="#">Register</a> <a href="#">Login</a>
            </div>
        </div>
    </div>

And the Test page:

<?php include 'header.php'; ?>
<div clas="wrap">
<div id="base">
    <div class="infobox">Lorem ipsum dolor sit amet.</div>
    <div class="sep" />
</div>
</div>

What is being resized is the "base" div.

Thanks, M4DNE55

Upvotes: 0

Views: 866

Answers (1)

soroush gholamzadeh
soroush gholamzadeh

Reputation: 2784

Some of your elements like #Base have percent values for their attributes.change them to pixel values.

Upvotes: 2

Related Questions