Right column overlaps content when window is resized

Hello. This is my first time posting. If this has been posted already, I apologize upfront.

I am using a two column layout for a site I'm working on. When I resize the browser, the right column overlaps my main content. I've tried using overflow: hidden on the right column div, but this hasn't worked.

The site is at http://students.depaul.edu/~sakel/Research.htm

The code is valid under XHTML Transitional. Any help would be greatly appreciated. Below is the CSS...


body
{
margin-top: 15px;
margin-left: 15px;
margin-right: 15px;
background-color:White;
color: #202020;
font-family: Verdana, Arial;
}

#contentwrapper
{
float: left;
width: 100%;
}

#contentcolumn
{
margin-right: 200px; /*Set right margin to RightColumnWidth*/
}

#rightcolumn
{
float: left;
width: 200px; /*Width of right column in pixels*/
margin-left: -200px; /*Set left margin to -(RightColumnWidth) */
margin-top: 30px;
}

.innertube
{
margin: 10px;
margin-top: 0;
}

.imageheader
{
margin-top: 30px;
margin-bottom: 30px;
width: 100%;
}

.bg
{
background: url(researchbg.jpg);
background-repeat: repeat-x;
width: 100%;
}

The problem is with the poor arrangement of columns. If we follow the same logical order of presentation to the markup, then everything will be OK. Say, a two column layout with smaller one on right side can be constructed easily as
#right_column{
float:right;
width:200px;
display:inline; /* may required to remove IE's 3px bug*/
}
#content{
margin-right:200px;
}

<div id="container">
<div id="right_column"></div>
<div id="content"></div>
</div>

Refer http://bonrouge.com/2c-hf-fluid(r).php

PS: make sure that you have no divitis (http://csscreator.com/?q=divitis)

Thanks. I will give it a go and check out the site. I figured the layout was messy and needed sprucing up. I will let you know if I have any problems.

Thanks again! :)

I reviewed the site and implemented the changes, however; I am still having problems with overlapping. In the example on the site you provided a link for, text is only used for the content area. In my case, I will need to use images inside the content area. Whenever the window is resized, the right column is pushed underneath the research image.

I uploaded the updated site at http://students.depaul.edu/~sakel/Research.htm so you can see what I'm talking about. Any help is appreciated.

Below is the relevant CSS...

body
{
margin:0; padding:0; height:100%;
font-family:arial, serif;
background-color:white;
}

#wrap
{
background:url(bg200.gif) top right repeat-y;
min-height:100%;
margin:auto;
position:relative;
}

* html #wrap {height:100%}

#header
{
background: #dadeef url(logo.gif) right no-repeat;
color:black;
margin:0; padding:0;
height:80px;
}

#right
{
float:right;
width:200px;
text-align:center;
}

#main
{
position:relative;
margin-right:200px;
}

#inner-wrap
{
padding-bottom:80px;
}

#inner-wrap:after
{
content:" ";
display:block;
clear:both;
}

#footer
{
position:absolute;
bottom:0;
height:80px;
background-color: #dadeef;
width:100%;
color:black;
text-align:center;
}

#footer p
{
margin:0;
font-size:1.5em;
text-align:center;
}

Your image is 700px wide and sidebar is 200px. Thus you need to keep a min-width for your inner-wrap/ or wrap. Have a try with

#wrap {/*General.css (line 8)*/
background:transparent url(bg200.gif) repeat-y scroll right top;
margin:auto;
min-width:900px;
width:expression( documentElement.clientWidth < 900 ? "900px": "auto"); /*IE min-width hack */
position:relative;
}

That line of code fixed it right up. It works in both FF and IE. No more overlapping! Thanks!