div overlaying problem with IE, Firefox works perfect!

My basic problem is this...

In IE6 & IE7 the right columns (div id = "page") do not go behind the left column (div id = "sidebar), no overlaying or overlapping functionality in IE. Firefox & Safari works perfect for overlapping.

Because it can't overlap it is shooting the right column to the bottom of the page in IE.  I can change the margin on it to a 177px and it buts right up against the left column fine but that's not the look I need.  

Any ideas?  I posted my css below.  You can view the problem at www.holzbau-ableiter.de

Thanks in advance.
body {
	margin: 20px;
	padding: 0;
	background: #CCCCCC;
}
 
body, th, td, input, textarea, select {
	font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #FFFFFF;
}
 
h1, h2, h3 {
	color: #3A570F;
}
 
h1 {
	letter-spacing: -2px;
	font-size: 3em;
}
 
h2 {
	font-size: 2em;
}
 
h3 {
	font-size: 1em;
}
 
input, textarea, select {
	color: #000000;
}
 
a {
	color: #3A570F;
}
 
a:hover {
	text-decoration: none;
}
 
/* Sidebar */
 
#sidebar {
	float: left;
	width: 187px;
	height: auto;
}
 
/* Logo */
 
#logo {
	margin-bottom: 5px;
	/*background: #FFFFFF url(images/img02.gif1) repeat-y;*/
}
 
#logo-top {
	height: 15px;
	background: url(images/img01.png) no-repeat;
}
 
#logo-center {
	background: url(images/img02.gif) repeat-y;
}
 
#logo-bottom {
	height: 15px;
	background: url(images/logo-bot.png) no-repeat left bottom;
}
 
#logo h1, #logo p {
	margin: 0;
	padding: 0;
	text-transform: lowercase;
	text-align: center;
	font-weight: normal;
	color: #FFFFFF;
}
 
#logo h1 {
	padding-top: 30px;
	background: url(images/img01.gif) no-repeat;
}
 
#logo p {
	padding-bottom: 30px;
	background: url(images/logo-bot.png) no-repeat left bottom;
}
 
#logo a {
	text-decoration: none;
	color: #FFFFFF;
}
 
/* Wrapper */
#wrapper {
	height:750px;
	text-align:left;
	width: 773px;
	margin-top: 50px;
	margin-right: auto;
	margin-bottom: 50px;
	margin-left: auto;
}
 
 
/* Widgets */
 
#widgets {
	/* background: #D9D8BC url(images/img02.gif1) repeat-y; */
 
}
 
 
#widgets-top {
	height: 15px;
	background: url(images/sidebar-img01.png) no-repeat;
}
 
#widgets-center {
	height: 365px;
	background: url(images/bot-sidebar-spacer.gif) repeat-y;
	margin-bottom:-35px;
}
 
 
#widgets-bottom  {
	height: 15px;
	background: url(images/img03.png) no-repeat left bottom;
}
 
#widgets * {
	color: #000000;
}
 
#widgets ul {
	margin: 0;
	padding: 0 0px 0px 0px;
	background: url(images/img04.gif) no-repeat left bottom;
	list-style: none;
}-
 
#widgets li {
}
 
#widgets li ul {
	padding: 0 0 20px 6px;
	background: none;
	line-height: 180%;
}
 
#widgets li li {
	padding-left: 12px;
	background: url(images/img05.gif) no-repeat left center;
}
 
#widgets h2 {
	margin: 0;
	padding: 0 0 20px 0;
	font-size: 1em;
}
 
/* Page */
 
#page {
	width: 596px;
	margin-left: 177px;
}
 
/* Banner */
 
#banner {
	height: 148px;
	background: url(images/img02.png) no-repeat;
}
/* Content */
 
#content {
	margin: auto; 
	text-align:left;
	height: 600px;
}
 
#content h1, #content h2 {
	font-weight: normal;
	margin-top: 0;
}
 
.pagetitle {
	margin: 0 0 10px 0;
	padding-top: 27px;
}
 
.post {
	margin-bottom: 0px;
	background: #333333 url(images/img09.gif) repeat-y left top;
}
 
.title {
	margin: 0;
	padding: 0 20px;
}
 
.byline {
	margin: 0 20px;
	border-top: 2px solid #C2C9B6;
}
 
.entry {
	height: 478px;
	padding: 20px 20px 0 50px;
	margin-bottom: 0px;
}
 
.meta {
	margin: 0;
	padding: 0 20px;
}
 
/* Rounded Corners */
 
.ct {
	margin-top: 5px;
}
 
.ct .l {
	background: url(images/img10.gif) no-repeat;
}
 
.ct .r {
	height: 15px;
	background: url(images/img11.gif) no-repeat right top;
}
 
.cb {
	background: url(images/img12.gif) repeat-x left bottom;
}
 
.cb .l {
	background: url(images/img13.gif) no-repeat left bottom;
}
 
.cb .r {
	height: 15px;
	background: url(images/img14.gif) no-repeat right bottom;
}
 
/* Footer */
 
#footer {
	clear: both;
	padding-top: 0px;
	font-size: smaller;
	width: 773px;
	margin-top: -25px;
	
}

Open in new window

CHINOSAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

danomaticCommented:
You may be experiencing the IE double margin float bug.  Try putting in:

#page {
      width: 596px;
      margin-left: 177px;
       float: left;
       display: inline;
}
0
danomaticCommented:
or simply this:

#page {
      width: 596px;
      float: left;
  }
0
CHINOSAuthor Commented:
That makes the right column go to the end (bottom right) of column 1, even if the margin is further than the width of the left column.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

danomaticCommented:
try this

#page {
      width: 585px;
      float:left;
}

That worked for me.
0
CHINOSAuthor Commented:
Did that work with the overlapping columns though?

 When I do the last step you posted, it brings the right column back up level to the left column.  Iit is adjacent to the left column with that but the left column is still not overlapping the right, they are just up against each other.

If I add the margin-left: 177px; it puts the right column back to the bottom again.
0
CHINOSAuthor Commented:
Could it be because the sidebar is also 'float=left;' ?
0
danomaticCommented:
How much space do you want between the left area and the main content area? any or just so they are not overlapping?
0
danomaticCommented:
http://207.58.187.44/holzbau-ableiter/

works in IE 6 / IE 7 and firefox / safari.
0
CHINOSAuthor Commented:
They are supposed to be overlapping, that's my whole issue.  Left side over right.
0
CHINOSAuthor Commented:
Here you can see a picture of what I'm trying to do.

http://holzbau-ableiter.de/ableiter_webseite.jpg
0
danomaticCommented:
ok I had to change it to a float right layout to get the overlay you want, reload my page:

http://207.58.187.44/holzbau-ableiter/
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
CHINOSAuthor Commented:
Due to the difficulty in getting margining and overlaying to work properly using CSS I have resorted to exporting the background pictures differently so that I don't have to overlap anymore.  I don't know why I didn't think of this in the first place.

The method you used did work but then the left margin was messed up so I have had enough with overlapping in CSS.  It was easy to export slices of the images from Illustrator and set up div's side by side.  

Thanks for the help
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.