Subir a DIV

Front-end

27/05/2016

No código listado abaixo quero subir a div da direita para ficar de acordo com a div superior a esquerda, Galera perdão pela ignorância, estou iniciando ainda. Me ajudem por favor.

<!Doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet"
type="text/css"
href="estiloum.css"/>
<script type="text/javascript" src="javaum.js"></script>
<title></title>
</head>
<body>
<div id="site">
<div id="destaque"></div>
<div id="um"></div>
<div id="dois"></div>
<div id="maislidos"></div>


</div>
</body>
</html>




#site {
	background:gray;
	width:900px;
	height:800px;
	margin:0 auto;
	padding:20px;
}

#destaque {
	background:white;
	width:600px;
	height:200px;
	clear:both;
	
	
}

#um {
	background:white;
	width:290px;
	height:500px;
	margin-top:20px;
	float:left;
	
}

#dois {
	background:white;
	width:290px;
	height:500px;
	margin:20px 0 0 20px;
	float:left;
	
	
}

#maislidos {
	background:white;
	width:240px;
	height:720px;
	margin:20px 20px 0 20px;
	float:right;
	
}
Thiago Santos

Thiago Santos

Curtidas 0

Melhor post

William

William

27/05/2016

Foram necessárias 3 alterações:

1 - No HTML coloquei a div "maislidos" abaixo da div "destaque";

2 - Coloquei no CSS da div "destaque" uma regra "float:left";

3 - Retirei a margem-top da div "maislidos";

Ficou Assim:

HTML
<!Doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="estiloum.css"/>
<script type="text/javascript" src="javaum.js"></script>
</head>
<body>
	<div id="site">
	<div id="destaque"></div>
	<div id="maislidos"></div>
	<div id="um"></div>
	<div id="dois"></div>
</body>
</html>


CSS
#site {
    background:gray;
    width:900px;
    height:800px;
    margin:0 auto;
    padding:20px;
}
 
#destaque {
    background:white;
    width:600px;
    height:200px;
    clear:both;
    float: left;   
}
 
#um {
    background:white;
    width:290px;
    height:500px;
    margin-top:20px;
    float:left;   
}
 
#dois {
    background:white;
    width:290px;
    height:500px;
    margin:20px 0 0 20px;
    float:left;  
}
 
#maislidos {
    background:white;
    width:240px;
    height:720px;
    margin:0 0 20px;
    float:right; 
}
GOSTEI 1

Mais Respostas

Thiago Santos

Thiago Santos

27/05/2016

Show, resolvido, obrigado!
GOSTEI 0
Luciano Santos

Luciano Santos

27/05/2016

Quero um código div ou qualquer outra forma, para atingi esse resultado do link
https://drive.google.com/file/d/0B8Ssi9zuKdQWMExWeVpGUXN0MlRsUzdmdGRuTFl2eU1yejB3/viewocal

Para ficar nesse local.
https://drive.google.com/file/d/0B8Ssi9zuKdQWeGZSSnVBaFBxM1FUN1hEeWdrRzhTNWI0Q01Z/view

Meu objetivo é que em cada quadro da div, fique uma noticia de um site especifico, que pretendo colocar através de plugin rss.


Enfim espero uma ajuda sobre como posso fazer isso
GOSTEI 0
POSTAR