Mi novia esta aprendiendo css y html :B el problema es que diseño una pagina con tres columnas, por ahora todo va bien, pero el Chrome toma como que la 2 columna no esta dentro del container principal, y si lo esta... les dejo el codigo
Código HTML:
<HTML>
<HEAD>
<TITLE>Rol</TITLE> <!-- titulo de la pagina -->
<style>
body {
font-family: Helvetica;
margin: 0;
background-image: url(http://dl.dropbox.com/u/39746348/fondotierra3columnas.jpg);
background-attachment: fixed;
}
.heading {
float: top;
width: 100%;
padding-top: 1px;
padding-bottom: 1px;
border-radius: 2px;
}
.container {
max-width: 1260px;
min-width: 1100px;
margin: 0 auto;
padding-top
}
.sidebar1 {
float: left;
width: 11%;
padding-top: 25px;
background: transparent url(http://www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;
border: 3px solid #086A87;
border-radius: 20px;
margin-top: 40px;
margin-left: 30px;
color: #848484;
min-height: 60%
}
.sidebar1:hover {
float: left;
width: 11%;
padding-top: 25px;
background: transparent url(http://www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;
border: 3px solid #0B4C5F;
border-radius: 20px;
margin-top: 40px;
margin-right: 0px;
color: #848484;
min-height: 60%
}
.content {
float: top;
min-height: 100%;
width: 60%;
margin-top: 200px
border-radius: 2px;
margin: 0 auto;
color: #FBF2EF;
}
.sidebar2 {
float: right;
width: 10%;
padding-top: 22px;
background: transparent url(http://www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;
border: 3px solid #086A87;
border-radius: 20px;
margin-top: 15px;
margin-right: 60px;
color: #848484;
min-height: 60%
}
.sidebar2:hover {
float: right;
width: 10%;
padding-top: 22px;
background: transparent url(http://www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;
border: 3px solid #0B4C5F;
border-radius: 20px;
margin-top: 15px;
margin-left: 0px;
color: #848484;
min-height: 60%
}
.menus {
float: top;
width: 62%;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 2px;
margin: 0 auto;
cursor: pointer;
}
</style>
</HEAD>
<body>
<div class="heading">
<div style="margin-left: 400px;"> <IMG SRC="http://dl.dropbox.com/u/39746348/1.png" WIDTH=500 HEIGHT=100 BORDER=0 ALT="Rol Libre Online"> </div>
<!-- parte de arriba --></div>
<div class="container">
<div class="menus">
<IMG SRC="http://dl.dropbox.com/u/39746348/dasdas%20copy.png" WIDTH=90 HEIGHT=50 BORDER=0 ALT="Inicio"> <!-- abajo--></div>
<div class="sidebar1">
barra 1 <!-- barra --></div>
<div class="content"> <BR> <BR> <BR> Esto es el contenido
<!-- content --></div>
<div class="sidebar2"> barra 2
<!-- otra barra --></div>
<!-- container --></div>
</body>
</html>