div spacing

how NN and IE handle div tags

page 1 of 2

page 1
• simple div presentation
• div presentation with positioning
page 2
• divs and borders

simple div presentation

Below is a simple example using DIVs to color behind text. We've already seen this simple coloring technique elsewhere on this site. In the code below, we describe two DIV areas, on ontop of one another.

<div style="background:blue;
		width:2.0in;">
	some text here
</div>
<div style="background:blue;
		width:2.0in;">
	some text here
</div>

we see in NN4.7:	we see in IE5.0:
we see in NN6.0:

The representations are nearly identical. NN4.7 will not color background past the end of text, but IE5.0 and NN6.0 will color the background behind the text the distance of the WIDTH property. In both cases, the DIV tags have no inherent spacing between them.

div presentation with positioning

Now we want to move the div boxes to the right. To do this we could use the LEFT property, and move the text and background a distance from the left side of the screen. To use this property, we will have to explicitly set the POSITION property of the DIV tag. We will set POSITION to RELATIVE so that the HTML is rendered in the order of the source code (in other words, we won't have to always set the vertical positioning of the DIV tags, the tags will render in the order they appear in the source code).

The code for these DIV tags is below.

<div style="position:relative;left:1.0in;
background:blue;
		width:2.0in;">
   some text here
</div>
<div style="position:relative;left:1.0in;
background:blue;
		width:2.0in;">
   some text here
</div>

we see in NN4.7:	we see in IE5.0:
we see in NN6.0:

NN4.7 has decided to put spacing between the DIV areas, while IE5.0 and NN6.0 still has the DIVs stacked ontop of the other.

Even setting the MARGIN properties to 0 will not cause NN4.7 to remove the spacing between the DIV tags.