border-top de una DIV no aparece justo encima sino muy muy arriba ¿Cómo hacer???

Estimados, aquí vuelvo yo con mis problemas con las div

Estoy haciendo una DIV muy simple llamada DIV PIE a la ue le quiero colocar un borde superior nada más y éste borde aparece muy arriba, demasiadoooooo
Está localizada debajo de una div global que contiene algunas divs más pequeñas con floating left

Para que no sea engorroso poniendo código sería un esquema así

<DIV global>

Div 1 con float=left Div 2 con float=left Div 3 con float=left

Div 4 con float=left Div 5 con float=left Div 5 con float=left

</DIV global>

<DIV PIE>
Texto de la DIV
</DIV PIE>

La distribución de las DIV flotantes queda perfecta en la página y de la DIV PiE tambien.

El problema es cuando le coloco un border top a la div PIE.

La especificación de la DIV PIE en la CSS es:

#DIV_PIE {width:940px; height:auto; float:none; background-color:white; border: 1px; text-align: center;
border-top: thin; border-top-color: black; border-top-style:solid solid ; ;
margin-top: 0px; margin-bottom: 10px; margin-left: 0px; margin-right: px; }

Pues bien, Resulta que ese tal " border-top: thin; border-top-color: black; border-top-style:solid solid ; "
se ve bien en el MS Expression pero en los exploradores reales no aparece justito encima de la DIV PIE
sino arriba de la DIV Global!!!!

Pero vean qué interesante esto!
Resulta que si posiciono el cursor al final de la DIV Global y doy Enter Enter Enter Enter Enter Enter Enter Enter Enter Enter
mete muchos <br> en el código y finalmente sí la DIV PIE es llevada hacia abajo y sólo entonces la línea negra sobre ella queda sólo sobre ella.

Creo que voy bien pero lo que no queda bien el el código

fíjense en la figura adjunta, no pude poner una figura más grande porque la web no me lo permite




Cómo soluciono este problema de la línea???
Graciaaaaaaaaaaaas
GusSiglo21

Aclaro algo......
Encerré todas las divs flotantes en una div no flotante llamada CONTENIDO y el defecto se hacía igual.

<DIV global>

DIV de título

<DIV CONTENIDO>
Div 1 con float=left Div 2 con float=left Div 3 con float=left

Div 4 con float=left Div 5 con float=left Div 5 con float=left
</DIV CONTENIDO>

<DIV PIE>
Texto de la DIV
</DIV PIE>

</DIV global>



Pero ahora.......
Acabo de poner una línea adicional con un simple espacio ...entre la div CONTENIDO y la div PIE lo puse, y a que no saben???????????????

<DIV global>

DIV de título

<DIV CONTENIDO>
Div 1 con float=left Div 2 con float=left Div 3 con float=left

Div 4 con float=left Div 5 con float=left Div 5 con float=left
</DIV CONTENIDO>

<span lang="es-ar">&nbsp;</span>


<DIV PIE>
Texto de la DIV
</DIV PIE>

</DIV global>


AHORA LA LÍNEA SUPERIOR QUEDA EXACTAMENTE ENTRE AMBAS DIVS, justo donde yo quería sobre la div pie, tal como lo había especificado ya antes en la CSS
Antes estaban bien divididas y separadas.
Entonces por qué si yo pido que una línea quede sólo arriba de una div, termina apareciendo mucho más arriba?

Alquien tiene una explicación lógica a eso?

Muchas gracias!!!!!
GusSiglo21

Hola de nuevo Gus :)

La verdad es que no entiendo bien la pregunta. Podrías aclarar un poco más lo que quieres conseguir con el diseño? Un esquemita o algo así?

Un saludo Gus!

Hola Superhipo.
Fíjate en el enlace que puse en la pregunta inicial

Veamos si con menos bla bla puedo explicarlo mejor

Quiero conseguir esto (sin los puntos suspensivos, obvio, sino se me juntan los textos de las tres divs superiores)
DIV GLOBAL
texto de div 1 ..................... texto de div2 ....................... texto de div 3
texto de div 1 ..................... texto de div2 ....................... texto de div 3
texto de div 1 ..................... texto de div2 ....................... texto de div 3
texto de div 1 ..................... texto de div2 ....................... texto de div 3
</DIV GLOBAL
__________________________________________________________________
DIV PIE con línea superior para separarla del resto

OK?

Pero con el
#DIV_PIE {width:940px; height:auto; float:none; background-color:white; border: 1px; text-align: center;
border-top: thin; border-top-color: black; border-top-style:solid ;
margin-top: 0px; margin-bottom: 10px; margin-left: 0px; margin-right: px; }

... me queda de esta forma:

__________________________________________________________________
texto de div 1 ..................... texto de div2 ....................... texto de div 3
texto de div 1 ..................... texto de div2 ....................... texto de div 3
texto de div 1 ..................... texto de div2 ....................... texto de div 3
texto de div 1 ..................... texto de div2 ....................... texto de div 3

DIV PIE con línea superior para separarla del resto


Lo que parece haber solucionado esto es lo siguiente:
<DIV GLOBAL>
texto de div 1 ..................... texto de div2 ....................... texto de div 3
texto de div 1 ..................... texto de div2 ....................... texto de div 3
texto de div 1 ..................... texto de div2 ....................... texto de div 3
texto de div 1 ..................... texto de div2 ....................... texto de div 3
</DIV GLOBAL>

<span lang="es-ar">&nbsp;</span> <--- AGREGANDO ESTO!
__________________________________________________________________
DIV PIE con línea superior para separarla del resto

Sólo así conseguí que la línea de borde se vea arriba del PIE

¿PEro es esta la forma correcta de hacer las cosas?
Esa es mi pregunta
Gracias!
GusSiglo21

Espera y te preparo un ejemplo ok? A ver si damos con la tecla :)

El truco está en lo de siempre... La estructura html correcta y distribuir bien los divs con css.

A ver si es esto lo que buscas Gus.

HTML

<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Mi tienda online</title>
	
	<link type="text/css" rel="stylesheet" href="estilos.css" />	
	
</head>
<body>
    
    <div id="global">
        
        <div id="encabezado">
            
            <h1>Este es el encabezado</h1>
            
        </div>
        
        <div id="contenido">
            
            <div id="texto1">
                <p>Texto 1</p>
            </div>
            
            <div id="texto2">
                <p>Texto 2</p>
            </div>
            
            <div id="texto3">
                <p>Texto3</p>
            </div>
            
        </div>
        
        <div id="pie">
            <p>Este es el pie</p>
        </div>
        
    </div>
</body>
</html>

CSS

* {margin: 0px; padding: 0px; border: 0px;}

#global {
    width: 900px;
    margin: 0px auto;
    border: 1px solid #f00;
}

#encabezado {
    width: 900px;
    height: 60px;
}

#contenido {
    width: 900px;
    height: 300px;
}

#texto1, #texto2, #texto3 {
    float: left;
    width: 300px;
    height: 300px;
}

#pie {
    width: 900px;
    height: 50px;
    border-top: 2px solid #000;
}

Los "height" los puedes quitar tranquilamente. Sólo los he puesto para que la vista que tengas de la estructura sea un poco más clara cuando veas la pagina. También le puedes quitar el borde al div#global si quieres.

Ya me cuentas.