CODEWITHSUNDEEP
javascripthtmlcssweb
user1386101
user1386101

Reputation: 1944

Needed assistance with moving div on window resize

So thats my layout of my basic html page and I want my content div to move relative to the browser window size when I resize it, I have looked up many answers on this site, but none of them seem to work. Any help is much appreciated.

<body>
    <header>
    </header>
        <div id="container">
            <div class="content">
                  xyz
            </div>
        </div>
    <footer>            
    </footer>
</body>

The CSS looks like this 

#container {
position:relative;
height: 100%;
width:100%; /* Sizing - any length */
margin:0 auto 0 auto; /* Center content */
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}

footer {
width: 100%;
background: black;
position: fixed; 
bottom: 0;
height: 60px;
}
header {
width: 100%;
background: black;
position: fixed; 
bottom: 0;
height: 60px;
}

Upvotes: 1

Views: 114

Answers (2)

Richard Peck
Richard Peck

Reputation: 76774

Although your question is quite obscure, I think you're asking about retaining the div's width when you move the width of the browser. If this is the case, what I'd recommend is to use width: 100%; in your CSS

This will ensure you are able to keep the container's width the same size in relation to the size of the container (in this case, the window); as opposed to not being able to

It seems you've got that already?

If you're looking for responsive web design, you'll have to use the @media CSS3 feature:

@media (max-width: 480px) {
   .footer {
       background-color: #fff;
   }
}

Upvotes: 1

Peter van der Wal
Peter van der Wal

Reputation: 11796

If you mean you want to always have it centered, you have to specify a width of less than 100% (either in px or %), otherwise the container will always use the full width of your viewport and therefore have no reason to 'move'.

Upvotes: 0

Related Questions