• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 520
  • Last Modified:

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

0
CHINOS
Asked:
CHINOS
  • 6
  • 6
1 Solution
 
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now