Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Space between adjacent divs on IE

Status
Not open for further replies.

mpartarrieu

Programmer
Nov 21, 2006
34
ES
I'm trying to place two divs next to each other, so one would be the nav area and the other the content area. They are both nested in another div that centers the page. Problem is that IE6 shows a 3px space between the two nested divs and I can't get rid of them. It renders nice on FF2, Safari 3, Opera 9 and Netscape 9.

Here's the relevant code:
Code:
<div style="margin: auto; width: 800px; background-color: Gray; height: 550px;">
 <div style="float: left; background-color: Fuchsia; width: 140px; height: 300px;">
  nav area
 </div>
 <div style="background-color: Lime; width: 640px; height: 500px; margin-left: 140px;">
  content area
 </div>
</div>
I know this problem probably has a simple answer, but I'm completely lost and wasted after dealing with it all morning.

Thanks in advance...

/michel

Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots.

So far, the Universe is winning.
 
Thanks for the url, Chris. Unfortunately the proposed solution didn't work for me. It's nice when you're having problems aligning text inside the div, but not to eliminate the 3-pixel problem I mention.

As I'm dealing with a two-column layout, I solved the problem by unseting margin-left for the container area div and setting each column opposite to each other (left/right). Then I gave each column a width such that:

(Width colum A) + (Width colum B) = Width of container

Code:
<div style="margin: auto; width: 800px; background-color: Gray; height: 550px;">
 <div style="float: left; background-color: Fuchsia; width: 140px; height: 300px;">
  nav area
 </div>
 <div style="float: right; background-color: Lime; width: 660px; height: 660px;">
  content area
 </div>
</div>
I tested this solution and it works on FF2, Safari 3, Opera 9 ,Netscape 9 and IE6. Not tested on IE7, so if someone could do so, thanks.

It still remains the question about what to do when you deal with a three-column layout.

/michel

Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots.

So far, the Universe is winning.
 
i've had this problem before. One of the things that I found affect this are the DOCTYPE declarations. If IE is in quirks mode (no doctype), it seems to add space. I fixed that issue by adding this type:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
but of course, this then changed a few other things in my layout, but it's a start....
 
This problem occurrs often when you have a DIV with [tt][maroon]float[/maroon][/tt] and another next to it without [tt][maroon]float[/maroon][/tt].. For some unlogical reasons IE puts a space between them.

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top