Div Repositioning on Window Resize - html

Question

I've been trying to achieve this for hours and I'm not quite getting it to work, so here it goes nothing:
I have this site:Site HomePage
composed by this HTML elements:
<div id="headerwrap">
<div id="header">
</div>
</div>
<div id="navigationwrap">
<div id="navigation">
</div>
</div>
<div id="midcontentwrap">
<div id="leftwrap">
<div id="left">
</div>
</div>
<div id="midwrap">
<div id="midleft">
</div>
<div id="midright">
</div>
</div>
<div id="rightwrap">
<div id="right">
</div>
</div>
</div>
</div>
What I need is:
- When the browser window is resized, either left and right columns stay where they are and the MID COLUMN RIGHT SIDE needs to go below MID COLUMN LEFT SIDE.
My CSS file is pretty simple by now and this is the only major thing I need to do as the window size changes.
Thanks in advance for any help.

Answer 1

Yep, you're going to want to use media queries. Here's a JSFiddle of it in action.
Resize the display iFrame of the Fiddle back and forth past 500px width to view the results. I spruced up your HTML a little, too, to make it more modern (sorry):
HTML:
<section class='contentWrap'>
<aside>
This element corresponds to the element on the far left of the image you linked to.
</aside>
<div class='mainContent'>
<article class='left'>
This element corresponds to the mid-left element in the image you linked to.
</article>
<article class='right'>
This element corresponds to the mid-right element in the image you linked to.
</article>
</div>
<nav>
This element corresponds to the element on the far right side of the image you linked to.
</nav>
</section>
CSS:
.contentWrap {
width: 100%;
}
.contentWrap aside {
display: inline-block;
width: 25%;
height: 200px;
border: 1px solid purple;
}
.mainContent {
display: inline-block;
width: 45%; /* only because the borders are upsetting the percantages */
height: 200px;
border: 1px solid gray;
vertical-align: top;
}
.mainContent article {
border: 1px solid #00cae9;
margin-bottom: 2px;
}
.contentWrap nav {
display: inline-block;
width: 25%;
height: 200px;
border: 1px solid orangered;
vertical-align: top;
}
#media screen and (min-width: 500px) {
.contentWrap {
width: 500px;
margin: 0 auto;
}
.mainContent article {
display: inline-block;
width: 47%;
vertical-align: top;
}
}
NB: if you're viewing it on a super small screen, it won't work; that's JSFiddle's problem.

Answer 2

Oh fun, an excuse to have a play with CSS Media Queries!
DEMO: http://jsfiddle.net/Vn2QY/1/
CSS
#midcontentwrap {
min-width: 500px;
}
#leftwrap, #midwrap, #rightwrap {
float: left;
min-height: 400px;
}
#leftwrap, #rightwrap {
min-width: 100px;
width: 25%;
background-color: #15a;
}
#midwrap {
width: 50%;
background-color: #45a
}
#midleft, #midright {
width: 50%;
float: left;
}
#midleft {
background-color: #a45;
}
#midright {
background-color: #4a5;
}
#media all and (max-width: 500px) {
#midleft, #midright {
width: 100%;
}
}
The key piece here is the final part of the CSS. It basically states that "for all media (screen, printing, etc) when the browser width is less than 500 pixels in width, change the styling for #midleft and #midright and make them 100% of the available width."
By increasing their widths their existing float styling will force them on to new lines.

Answer 3

Try this DEMO
I'm guessing your want to get a fluid/responsive design. This should work for you.
Use float:left and min-width

Answer 4

To solve this problem....use % value for all div id width