Se quita el borde del div

epcode · #1 (**permalink**) 23/03/2011, 14:59

¿Por que se quita el borde del div?

Tengo el siguente codigo:

index.php

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Data Land</title>
<style type="text/css">
@import url("css/css.css");
</style>
</head>
<body>
<div id="header">Data Land</div>
<div id="container">
    <div id="column-left">Columna izquierda</div>
    <div id="column-right">Columna derecha</div>
</div>
<div id="foot">&copy;Copyright 2011</div>
</body>
</html>

css.css

Código:

@charset "utf-8";
/* CSS Document */
body {
	margin: 0 auto;
	padding: 0;
	height: 10000px;
	background: #e7e7e7;
}
#header{
	width: 950px;
	margin: auto;
	padding-top: 25px;
	padding-bottom: 25px;
}
#container{
	width: 950px;
	margin: auto;
	background: #e7e7e7;
	border-top: 1px solid #cfcfcf;
	border-left: 1px solid #cfcfcf;
	border-right:  1px solid #cfcfcf;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-topleft: 10px;
        -webkit-border-top-right-radius: 10px;
	-webkit-border-top-left-radius: 10px;
}
#column-left{
	width: 680px;
	padding: 10px;
	position:absolute;
}
#column-right{
	width: 230px;
	padding: 10px;
	float: right;
}
#foot{
	width: 950px;
	margin: auto;
	border-left: 1px solid #cfcfcf;
	border-right:  1px solid #cfcfcf;
	border-bottom: 1px solid #cfcfcf;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
        -moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
        -webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	background: -webkit-gradient(linear, left top, left bottom, from(#e7e7e7), to(#a7a7a7)); /* Chrome - Safari */
	background: -moz-linear-gradient(top, #e7e7e7, #a7a7a7); /* Firefox */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e7e7e7', endColorstr='#a7a7a7'); /* Explorer */
	clear:both;
}

En CSS; este div (container) tiene un borde superior izquierdo y derecho de 10px. y bordes laterales, para unirse con el div footer.

El error esta en los divs que son contenidos por container... pero que linea?

epcode · #2 (**permalink**) 23/03/2011, 15:07

del div (column-left)
la linea es: position:absolute;

del div (column-right)
la linea es: float:right;

¿Que solucion tengo?

Ahi esta, lo solucione cambiando (float:right;) por (margin-left: 700px;) para alejarlo a la derecha

ArielGomeX · #3 (**permalink**) 24/03/2011, 12:13

FAIL.

Pudiste soluciones ese problema mejor, ademas tu solucion tendra problemas en diferentes exploradores.