Global
Argentina
Chile
Colombia
España
México
Perú
Uruguay
Venezuela
Comunidad oficial de diseñadores web, web developers y Webmasters. Aqui podemos tratar temas actuales sobre diseño y tecnología. Podemos compartir y actualizarnos. Flash, PHP, ASP, Java, HTML, CSS, MySQL, CMS, etc. Unite YA y lee los Sticky
Ver más- 17,210 Miembros
- 12,955 Temas
- 4,970 Seguidores
[Ayuda] Maquetado web
Buenas T!Necesito hacer lo siguiente:
El código html que tengo, es:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- Include links to external files -->
<!-- CSS files-->
<link rel="stylesheet" href="css/global.css" />
<!-- JavaScript files-->
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script src="js/js.js"></script>
<!-- Icon -->
<link rel="shortcut icon" href="img/favicon.ico" />
<title>Web title</title>
</head>
<body>
<header class="clear">
<!-- Header content -->
<div id="header" class="clear">
<div id="logo"><a href="#"><img src="img/logo.png" title="Web Title"/></a></div>
<div id="user_box">User box</div>
</div>
</header>
<section class="clear">
<!-- Section content -->
<div id="main" class="clear">
<!-- Columna izquierda -->
<div id="left-col" class="clear">
Left Column content
</div>
<!-- Columna derecha -->
<div id="right-col" class="clear">
<div id="content"> Content</div>
<div id="sidebar"> Sidebar</div>
</div>
</div>
</section>
<footer class="clear">
<!-- Footer content -->
<div id="foot">
Foot content
</div>
</footer>
</body>
</html>
y el código css, es:
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
header{
background:#FC6;/**/
}div#header{
width:1000px;
margin:0 auto;
background:#CCC; /**/
}div#logo{
float:left;
}div#logo img{}
div#user_box{
width:300px;
height:30px;
top:50%;
position:relative;
float:right;
margin: -15px 0 0 0;
background:#999;/**/
}
section{
/* CSS to section tag */
background:#F00;/**/
}div#main{
margin:0 auto;
width:1000px;
background:#666;/**/
}div#left-col{
width:200px;
float:left;
background:#333;/**/
}
div#right-col{
width:775px;
float:right;
background:#00F;/**/
}div#content{
width:550px;
float:left;
background:#00C;/**/
padding:5px;
margin-left:5px;
}
div#sidebar{
width:200px;
float:right;
background:#009;/**/
}
footer{
/* CSS to footer tag */
background:#006;/**/
}div#foot{
margin:0 auto;
width:1000px;
background:#0F9;/**/
}
Al probarlo con wampserver ; me arroja esto:
Es decir, la columna right-colum aparece floatando a la derecha, pero no al lado, sino a continuación debajo de left-column
El código que utilizo para limpiar (Clase clean) es:
.clear:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clear {
display:inline-block;
clear:both;
}
.clear {
display:block;
}
* html .clear {
height:1px;
}
Donde esta el error(?) Muchas gracias !!!
- 0Calificación
- 0Seguidores
- 238Visitas
- 0Favoritos
1 comentario