DIV que empurra conteudo conforme aumenta
Fala pessoal, dei uma busca em perguntas anteriores, até tem algumas assim, mas as que tem nao me esclarecem, mas a questão enfim a questão é,
tenho um layout, que necessáriamente eu tenho que setar left e top, por exemplo este simples 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">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Posicionamento</title>
<style>
.div1
{
background-color:#FF0000;
min-height:100px;
min-width:100px;
float: left;
}
.div2
{
background-color:#0000FF;
min-height:100px;
min-width:100px;
float:right;
}
.div3
{
background-color:#00FF00;
min-height:100px;
min-width:100px;
}
.botao
{
margin-left: 22px;
margin-top: 35px;
}
.text
{
height:300px;
width:300px;
}
</style>
<script>
window.onerror = erros;
function erros(msg, url, line)
{
window.alert("Erro Encontrado: "+msg+". \nLinha: "+line+".\nURL: "+url);
}
function aumenta(div)
{
document.getElementById(div).innerHTML = "<input type='text' class='text' />";
}
</script>
</head>
<body>
<div id='div1' class='div1'><input id='botao1' type='button' class='botao' value='esticar' onclick="aumenta('div1')"/></div>
<div id='div2' class='div2'><input id='botao2' type='button' class='botao' value='esticar' onclick="aumenta('div2')"/></div>
<div id='div3' class='div3'><input id='botao3' type='button' class='botao' value='esticar' onclick="aumenta('div3')"/></div>
</body>
</html>tenho muitas duvidas referentes a ele, como por exemplo... primeiro, antes de clicar em qualquer botão, eu gostaria de fazer o quadrado verde, respeitar o tamanho de 100px x 100px como os outros, e também , eu gostaria que ele aparece-se em baixo do quadrado vermelho
formando assim
vermelho azul
verde
sem espaço algum entre os tres, e assim ao clicar no botao para redimencionamento, o quadro que for aumentado empurrasse os outros dois, sem passas por cima deles,,,
como fazer isso sem e com espaço entre eles??
Discussão (21)
Carregando comentários...