CODEWITHSUNDEEP
htmlcss
Chopper Mio
Chopper Mio

Reputation: 11

Keep div from moving on reduction of the browser screen

When I resize the browser window my div elements move to the left but I want them to stay in one place when I do that. How do I achieve to make the div elements stay in one place while resizing the browser window?

<div style="background:red; width:30px; height:30px">

</div>

Upvotes: 1

Views: 3382

Answers (3)

JoeCortopassi
JoeCortopassi

Reputation: 5093

<div style="background:red; width:30px; height:30px position: absolute;
            top:/* pixels from top of screen*/ 30px;
            left:/* pixels from left side of screen*/100px;">

</div>

Upvotes: 1

Prabhakaran Parthipan
Prabhakaran Parthipan

Reputation: 4273

use vertical-align,padding,position propert property.. For Position property refer following links enter link description here For Padding property refer following linksenter link description here For vertical align property refer following linksenter link description here

<div style="background:red; width:30px; height:30px;vertical-align:top;padding:0px 0px 0px 0px">
</div>

Upvotes: 0

user188654
user188654

Reputation:

You have a couple of options to achieve what you want however which one you'll use depends upon the rest of your code.

You could absolutely position the containers however in that case its extremely important that the parent element containing those divs also has a non-static positioning defined upon it. One of the most popular ways to achieve that is to define relative positioning to the parent element and then absolutely position the inner elements.

Here is an example.

HTML

<div class="wrapper">
    <div class="div_1">
        <!-- DIV 1 content -->
    </div>
    <div class="div_2">
        <!-- DIV 2 content -->
    </div>
</div>

CSS

.wrapper {
    position:relative;
}

.div_1 {
    position:absolute;
    top:10px;
    left:20px;
}
.div_2 {
    position:absolute;
    bottom:10px;
    left:20px;
}

Upvotes: 0

Related Questions