Exactamente eso es lo que busco hacer.
probé el código que pusiste y efectivamente no funciona =/, pensé que seria algo muy sencillo de solucionar pero al parecer no lo es.
respecto a lo del clearfix y el div "innecesario" quizas este codigo te ayude a entenderlo y así tengas tus códigos mas limpios:
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>Documento sin título</title>
<style>
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
.container{
background:#aaa;
width:300px;
position:relative;
}
.foo,
.bar{
background:#0000ff;
width:30px;
height:30px;
}
.foo{
float:left
}
.bar{
float:right;
}
</style>
</head>
<body>
<div class="container clearfix">Contenedor
<div class="foo">1</div>
<div class="bar">2</div>
</div>
</body>
</html>
Prueba agregando y eliminando el codigo en rojo y de seguro entienderas el funcionamiento del clearfix que intento usar en mi codigo.
El codigo actualizado de mi problema es el siguiente
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>Documento sin título</title>
<style>
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
.container{
background:#aaa;
width:300px;
position:relative;
}
.foo,
.bar{
background:#0000ff;
width:30px;
height:30px;
position:relative;
}
.foo{
top:0;
left:0;
}
.bar{
top:100px;
left:50px;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="foo">1</div>
<div class="bar">2</div>
</div>
</body>
</html>
Si logro encontrar una respuesta a esto claro que la compartiré aquí, y si alguien sabe como solucionar mi problema por favor lo haga saber.
saludos y gracias por todo