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?
 
danomaticConnect With a Mentor Commented:
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
 
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.