como cuadrar un div medido en porcentaje con un bode de 1 px dentro de un rango Tengo una pagina con un width div=global de 900px
dentro del div global tengo 2 divs pegados horizontalmente, uel div "A" 85% del ancho total y el o div "B" 25%..
Ahora quiero agregarle un borde a cada div. Al div "A", que esta ubicado a la izuqierda quiero agregarle un borde de 1px a la izquierda y al div B a la derecha.
El tema es que cuando le agrego el borde, como ya esta ocupado todo el 100% con los 2 divs, el borde hace que el div B se corre abajo del A porque sobrepasa el 100%.
Intenté dale el borde en % pero no funcionó (se ve que no se puede añadir borde con porcentajes).
Si disminuyo el porcentaje de los div para agregar un borde van a descuadrar con respecto al resto de los contenidos de la página.
No puedo poner la medida de los div en PX porque luego tengoproblemas con el zoom del navegador.
Finalmente les dejo el codigo Html y CSS.
Código:
<head> <title>Index</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <div id="global"> <div id="cabecera"><img src="contenidos/logo.PNG"></div> <div id="menu"> <table cellspacing="0px"> <tr height=""> <td><a href="">A</a></li></td> <td><a href="">B</a></li></td> <td><a href="">C</a></li></td> <td><a href="">D</a></li></td> <td><a href="">E</a></li></td> <td><a href="">F</a></li></td> <td><a href="">G</a></li></td> <td><a href="">H</a></li></td> <td><a href="">I</a></li></td> <td><a href="">J</a></li></td> <td><a href="">K</a></li></td> <td><a href="">L</a></li></td> <td><a href="">M</a></li></td> <td><a href="">N</a></li></td> <td><a href="">O</a></li></td> <td><a href="">P</a></li></td> <td><a href="">Q</a></li></td> <td><a href="">R</a></li></td> <td><a href="">S</a></li></td> <td><a href="">T</a></li></td> <td><a href="">U</a></li></td> <td><a href="">V</a></li></td> <td><a href="">W</a></li></td> <td><a href="">X</a></li></td> <td><a href="">Y</a></li></td> <td><a href="">Z</a></li></td> </table> </div> <div id="buscador"></div> <div id="contlinks"> <div id="continfo"> <div id="info"></div> <div id="links"></div> </div> </div> </div> </body> </html>
Código:
* {
margin:0px;
padding:0px;
border:0px;}
body {
background-image:url(contenidos/fondo.png);
background-repeat:repeat-x;
background-color:#DFF3F4;}
#global {
background-color:;
width:900px;
margin:5px auto;}
a {
text-decoration:none;}
#cabecera {
background-color:;
text-align:center;}
#menu {
border-left:;
width:84%;
float:left;
height:35px;
background-image:url(contenidos/menu.png);
background-repeat:repeat-x;}
#menu table {
height:35px;
width:100%;
font-weight:bold;
font-family:"Courier New", Courier, mono;
line-height:200%;
float:left;
list-style:none;}
#menu td {
text-align:center;}
#menu td a {
color:white;
display:block;}
#menu td a:hover {
color:white;
background-image:url(contenidos/menu2.png);}
#buscador {
background-color:pink;
background-image:url(contenidos/menu.png);
background-repeat:repeat-x;
height:35px;
float:left;
width:16%;}
#contlinks {
clear:left;
float:left;
width:100%;
overflow:hidden;
background:#ffa7a7; /* column 2 background colour */
}
#continfo {
float:left;
width:100%;
position:relative;
right:50%;
background:#fff689; /* column 1 background colour */
}
#info {
float:left;
width:46%;
position:relative;
left:52%;
overflow:hidden;
}
#links{
float:left;
width:46%;
position:relative;
left:56%;
overflow:hidden;
}
