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!

Register Log in
  • Congratulations strongm 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

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.
 
Sort by date Sort by votes
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.
 
Upvote 0 Downvote
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....
 
Upvote 0 Downvote
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]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
420
spamjim
spamjim
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
323
tyutghf
tyutghf
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
115
lmcate
lmcate
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
367
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
504
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top