I want to place the red border div,on the left where the green border is,when the window is resized.
Currently the div 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;");
}

I want to place the red border div,on the left where the green border is,when the window is resized.
Currently the div 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;");
}

• javascript
• jquery
• html
• css

• The red border is on the right, do you mean you want the green border to appear where the red border box is on the right? Also, post your HTML as well please. – Lowkase Commented Mar 20, 2013 at 12:53
• @Lowkase I think he means when the page width is reduced, move the div highlighted in red to the position highlighted by the green border. – Antony Commented Mar 20, 2013 at 12:54
• Sorry,i want to place the red border div under the 3 buttons,where the green border is. – Iliescu Alex Commented Mar 20, 2013 at 12:55
• @lliescu Alex - Please post your HTML as well as any relevant CSS. – Lowkase Commented Mar 20, 2013 at 12:56
• can you create a jsfiddle link of this so we can test it? – Dead Man Commented Mar 20, 2013 at 12:56

3 Answers 3

you can use media queries

and test your site by re-sizing the window

adjust what you want on which device and always try to play with %'s not px's

Some media queries for you Thanks to 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 */
}

Try it like

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 currently your twitter-2 div has class red

On window.resize function

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

Also you can do it for different width as you required.

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

Just put the whole line on a container than float left and right, when the space is too small the box will go underneath naturally.

<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}