How to change the left margin of a div when resizing a window?

Question

I want to put the red border of the div, on the left, where the green frame is when the window is resized.
The div currently has the following css rules:

#twitter-2 { width: 332px; background-color: #7E7D7D; opacity: 0.6; margin-left:525px; margin-top:-142px; } 

I solved the problem:

 window.onresize = function(event) { var elem = document.getElementById("twitter-2"); elem.setAttribute("style","margin: 20px 1px;"); } 

Answer 1

you can use media queries

and test your site by resizing the window

configure what you want on which device, and always try to play with% not px

Some media queries for you Thanks Chris

 /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ Like This #twitter-2 { margin-left:Some Value ; margin-top:Some Value ; } } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } 

Answer 2

try it

CSS

 .red { width: 332px; background-color: #7E7D7D; opacity: 0.6; margin-left:525px; margin-top:-142px; } .green { width: 332px; background-color: #7E7D7D; opacity: 0.6; margin-left:25px; margin-top:-342px; } 

Suppose your twitter-2 div has class red

In window.resize function

 $(window).resize(function(){ $('#twitter-2').addClass('green').removeClass('red'); }); 

You can also do this for different width as needed.

Read http://api.jquery.com/resize/

Answer 3

Just put the whole line in the container than float left and right, when the space is too small, the window will be natural.

 <div class="row"> <div class="follow">keep in touch</div> <div class="tweet-update">bla bla</div> </div> .follow {float:left; margin-bottom:30px;} .tweet-update {float:right}