se puede flotar un div por la derecha cruzando varias lineas?

00israel · #1 (**permalink**) 20/10/2011, 05:55

visualmente me voy a explicar mucho mejor.

Imaginaos que los cuadros son divs. El div amarillo y verde estan al 100% de altura con respecto a su contenedor. ¿Podria hacer que el div magenta llegara hasta el 100% de altura tambien?

Quisiera hacerlo flotando. Aunque si asi no se puede y se tiene que hacer con posicion absoluta.

gracias

C2am · #2 (**permalink**) 20/10/2011, 07:37

Hola
Y que código estas usando?
Intente esto pero al poner el 100% esos div (amarillo y verde) sobrepasan al contenedor, así que supongo que no tienes algo parecido.

Código HTML:

Ver original<!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=iso-8859-1" />
<title>Documento sin título</title>
<style>
<!--
#contenedor{
    margin:0 auto;
    background-color: #eee;
    position: relative;
    height: 600px;
    width: 800px;   
    }
#uno{
    background-color: #06C;
    float: left;
    height: 250px;
    width: 398px;
    border: thin solid #000;
}
#dos{
    background-color: #F06;
    float: right;
    height: 250px;
    width: 398px;
    border: thin solid #000;
    height:100%;
}
#tres{
    background-color:#FF6;
    float: left;
    height: 250px;
    width: 198px;
    border: thin solid #000;
    height:100%;
}
#cuatro{
    background-color:#0C0;
    float: left;
    height: 250px;
    width: 198px;
    border: thin solid #000;
    height:100%;
}
-->
</style>
</head>
 
<body>
    <div id="contenedor">
        <div id="dos"></div>
        <div id="uno"></div>
        
        <div id="tres"></div>
        <div id="cuatro"></div>
        
    </div>
</body>
</html>

00israel · #3 (**permalink**) 20/10/2011, 07:52

pues mira estoy haciendo pruebas con este codigo:

Código HTML:

<!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 type="text/css">
* {
}
html, body {
	height: 100%;
	margin: 0px;
	background-color: #ede5db;
}
	
#contenedor {
	height: 100%;
	width: 1061px;
}
#contenedor #div0 {
	width: 600px;
	height: 200px;
	float: left;
	background-color: #0FF;
}
#contenedor #div {
	width: 300px;
	height: 100%;
	float: left;
	background-color:#963
}
#contenedor #div2 {
	width: 300px;
	height: 100%;
	float: left;
	background-color: #888;
}
#contenedor #div3 {
	display: block;
	width: 361px;
	height: 100%;
	float: left;
	clear: right;
	background-color: #F00;
}
#contenedor #div2 #texto {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	margin-top: 50px;
}
</style>
</head>

<body>
<div id="contenedor">
<div id="div0"></div>
<div id="div3">sdfsdfsdf</div>
<div id="div">sdfsdfsdf</div>
<div id="div2">
	<div id="texto"> esto es una prueba</div>
</div>
</div>
</body>
</html>