CODEWITHSUNDEEP
htmlcsslayoutweb
JuanGD
JuanGD

Reputation: 43

How to prevent HTML element moving when the browser is resized?

I'm creating a HTML page, but I have a big problem: resizing browser. The elements from my webpage move from your position when I resize the browser. My HTML code is the next:

<body>
<div class="wrap">
    <div class="header">
        <form class="form">
            <label>E-mail </label><input >
            <label>Password </label><input >
        </form>
    </div>
</div>

My CSS code is next:

.wrap{width:100%;}
.header{background-color:#046b5b; width: 100%; height: 5em;}
.form{position:relative; top:50%; float: right;}

What should I do?

Upvotes: 2

Views: 7265

Answers (2)

BuddhistBeast
BuddhistBeast

Reputation: 2670

I wanted to add in a quick different way to solve this issue, while also making your website still responsive. Here is the code:

HTML

<div class="wrap">
    <div class="header">
        <form class="form">
            <label class="entry"> <span>E-mail</span>
                <input placeholder="Email Address" />
            </label>
            <label class="entry"> <span>Password</span>

                <input placeholder="Password" />
            </label>
        </form>
    </div>
</div>

CSS

.wrap {
    width:100%;
}
.header {
    background-color:#046b5b;
    width: 100%;
    height: 5em;
    min-width: 200px;
}
.form {
    position:relative;
    display:inline-block;
    top:50%;
    float: right;
}
.entry {
    display:inline-block;
}

@media screen and (max-width: 460px) {
    span {
        display:none;
    }
    form {
        text-align:center;
        margin: 0 auto;
    }
    .header {
        height:7em;
    }
}

Conclusion

I changed a few things in your HTML, as you can see but it's nothing too trivial at all. I added a placeholder for when the browser gets small, the user still knows exactly what to put inside of the input fields versus having to need the labels there to throw the alignment off of the inputs.

I added a CSS media query to check for when the screen size hits a certain point, in this example I just used 460px but you can always adjust this for whatever you would like. Basically, if a user hits that screen size, it will activate all of the CSS in that block. For this problem, I have used it to hide the label text, lengthen the height of the wrapper to avoid an inconsistent height, while also aligning the input fields to be right below one another.

Side Note

I decided to add in all of these effects because in all reality, you will want to make your site as mobile friendly as possible without ruining the true beauty of your website. If you do not like it, that's okay, but remember that a responsive website is really great to have. It shows that you have accommodated for all screen sizes and probably all potential browsers.

Also, please note that I stuck a min-width in your code, so when you re-size the JSFiddle window, you will still have the ability to scroll over at that minimum width provided.

DEMO JSFiddle

Upvotes: 2

richie
richie

Reputation: 467

A quick way to do this, would be to set a min-width on the wrap container that way you'll never see the two elements overlap when the width goes to low.

IE:

.wrap{width:100%; min-width:600px;}

For example: http://jsfiddle.net/8w3Am/

Upvotes: 2

Related Questions