When resizing the browser, I am aiming to achieve the layout displayed in the second image without encountering the positioning of the first image. http://jsfiddle.net/gtczu/19/
<div id="lft-widget" style=" border:solid red 3px"></div>
<div id="rgt-widget" style=" border:solid blue 3px"></div>
<div id="center-widget" style="border:solid green 1px"></div>
@charset"utf-8";
/* CSS Document */
* {
margin:0;
padding:0
}
a, a:hover {
text-decoration:none;
border:none
}
body {
margin:0;
padding:0;
}
#center-widget {
position :relative;
width:300px;
height:auto;
float:left;
padding: 5px 0 15px 30px;
}
#lft-widget {
width:234px;
height:auto;
position:relative;
float:right;
padding:25px 25px 0 0px;
}
#rgt-widget {
width:200px;
height:auto;
float:left;
padding: 2px 22px 72px 30px;
position:relative;
}
My objective is for when the browser is resized, #center-widget to move to the bottom of #rgt-widget. Although it currently moves accordingly, it initially goes to the bottom of #lft-widget before reaching #rgt-widget. I want it to directly position itself at the bottom of #rgt-widget.
This is my desired outcome.
Achieving this goal while avoiding this specific positioning.