Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

RoM

[Resolvido] 2 colunas em div dentro de outra div

Por , em Desenvolvimento frontend

Recommended Posts

RoM    0

RoM
Postado

Eu queria que uma div ficasse do lado da outra como colunas, só que elas estariam dentro de outra div, que teria um background. Mas eu estou usando o float para elas ficarem um do lado da outra, e com isso elas não 'preenchem' a outra div. Olha como ficou:

Imagem Postada

 

Eu coloquei as bordas só para facilitar a ver...

 

O CSS:

body {
	font: 11px Arial, Helvetica, sans-serif;
	padding: 15px 0px 25px 0px;
	background: #d3e7ff url('images/bg.png') repeat-x;
}
img {
	border: none;
}
.logo {
	background: url(images/logo.png) bottom center no-repeat;
	width: 750px;
	height: 105px;
}
.cima {
	background: url(images/borda-cima.png) no-repeat;
	width: 750px;
	height: 12px;
}
.baixo {
	display: block;
	background: url(images/borda-baixo.png) no-repeat;
	width: 750px;
	height: 12px;
}
.esquerda {
	background: url(images/borda-esquerda.png) top left repeat-y;
	width: 750px;
}
.direita {
	background: url(images/borda-direita.png) top right repeat-y;
	width: 750px;
}
.caixa {
	background: #ffffff;
	width: 726px;
	padding: 25px 0px 25px 0px;
border: medium dashed #ff0000;
}
.conteudo {
	float: left;
	width: 460px;
border: medium dashed #ff0000;
}
.imagem {
	float: left;
	width: 250px;
border: medium dashed #ff0000;
}
p {
	margin: 0 0 0 0;
}
form {
	margin: 0 0 0 0;
}

O HTML:

<center>
<div class="logo"></div>
<div class="cima"></div>
<div class="direita">
<div class="esquerda">

<div class="caixa">

<div class="imagem"><img src="images/login.png"/></div>
<div class="conteudo">

<?
include('conf.php');
error_reporting(0);

echo "
<script type=\"text/javascript\"> var RecaptchaOptions = { theme : 'white' }; </script>
";

echo "
<form name=\"login\" method=\"post\" action=\"index.php\">
<p>Usuário:<input name=\"user\" type=\"password\"></p>
<p>Senha:<input name=\"pass\" type=\"password\"></p>
<p>Confirmação visual:</p>";

$publickey = "6LeM3wQAAAAAABWso_JIhyiRpIEEvJnd9r9ot14N";
require_once('recaptchalib.php');
echo recaptcha_get_html($publickey);

echo "

<input type=\"submit\" name=\"Submit\" value=\"Enviar\">
<input name=\"seg\" type=\"hidden\" value=\"1\"></form>
";


?>

</div>
</div>

</div>
</div>
<div class="baixo"></div>

</center>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Coloca um elemento nivel de bloco, com clear both, depois das colunas, para limpar os floats, e fazer o elemento pai, ter a altura das colunas.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Assim amigo:

</div>
<div style="clear:both;"></div>
</div>

</div>
</div>
<div class="baixo"></div>
Não use: <center>, essa tag está em desuso.

Prefira declarar o width do elemento nivel de bloco(div, p, h1..), e colocar margin: 0 auto;

Como é um layout inteiro, declare o margin auto, para apenas a DIV que engloba tudo, pois oq está dentro, vai junto.

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoM    0

RoM
Postado

Muito obrigado!

Só a substituição do <center> que não funcionou, eu criei uma nova div englobando todas, e apliquei o "margin: 0 auto;" nela, só que não ficou centralizado.

 

E outra coisa, como eu faço para centralizar verticalmente a div imagem?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Não sei bem como está o teu documento, mas para isso você precisa declarar um DOCTYPE,(se não o IE renderiza em quirks).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"> 
<head>
Aqui ficou certinho..

#tudo {
	width: 726px;
	margin: 0 auto;
}
a imagem tem altura fixa ??

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoM    0

RoM
Postado

Agora deu, eu não tinha colocado a largura...

 

A imagem tem altura fixa sim, mas o conteúdo da div conteudo não tem não...

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito