Buenos dias estoy teniendo un problema que no se me ocurre como arreglar
tengo 4 divs los cuales contienen una etiqueta p con un texto y un boton,
los divs tiene ancho fijo, y alto variable por que no conozco la longitud de los textos.
los divs estan flotados a la izquierda por lo que se ponen uno al lado del otro.
y lo que quiero hacer y no puedo es que los botones queden en la misma linea.
se enteinde??
la unica cosa con lo que pude lograr un efecto similar es fijando el alto y poniendole posicion al boton pero no me sirve por que no conzco el tamlo del texto y si todos los textos son muy cortos queda mal y si son muy largos tambien.
alguien sabe como se puede hacer para que se alinien dinamicamente segun el tamaño del texto???
gracias!!!
pego el codigo para que lo puedan ver:
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=iso-8859-1" />
<title>Untitled Document</title>
<style>
.box {
border:#000000 1px solid;
width: 200px;
height: 450px;
float: left;
margin:2px;
}
.box-fix {
border:#000000 1px solid;
width: 200px;
height: 450px;
float: left;
margin:2px;
}
.box-fix input {
position:absolute;
top:900px;
}
</style>
</head>
<body>
<p>
asi es como queda
</p>
<div class="box">
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
<input name="button" type="button" value="Boton"/>
</div>
<div class="box">
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
<input type="button" value="Boton"/>
</div>
<div class="box">
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
<input type="button" value="Boton"/>
</div>
<div class="box">
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p> <p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p> <p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p> <p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
<input type="button" value="Boton"/>
</div>
<p>
y asi es como quiero que quede pero necesito que quede asi sin el psoition: absolute ni el height fijo en el css
</p>
<div class="box-fix">
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
<input name="button" type="button" value="Boton"/>
</div>
<div class="box-fix">
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
<input type="button" value="Boton"/>
</div>
<div class="box-fix">
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
<input type="button" value="Boton"/>
</div>
<div class="box-fix">
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p> <p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p> <p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p> <p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
<input type="button" value="Boton"/>
</div>
</body>
</html>