Criação de layout

Yanna Silva · Janeiro 14, 2018

Olá boa noite

Estou tentando criar um layout igual a esse http://www.direitadobrasil.com.br/layout.php mas estou tendo dificuldades, as divs não se comportam como eu gostaria.

Alguém sabe como me ajudar?

lowys · Janeiro 14, 2018

Olá!
Você pretende montar esse layout fixo ou responsivo?
Se pretende que seja responsivo, como ficaria na resolução 320px X 480px?

wash · Janeiro 14, 2018

Olá!

Para conseguir montar o layout você vai precisar de alguns elementos invisíveis pra "segurar" essa estrutura.

Há algumas maneiras possíveis de se resolver esse layout.

Segue sugestão:

Os elementos com borda traçada em magenta, serão invisíveis e não terão espaço

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Layout</title>
	<style type="text/css">
	html *{
		box-sizing: border-box;
	}
	html, body{
		margin:0;
		background-color: #ddd;
	}
	main{
		width: 100%;
		max-width: 800px;
		min-width: 320px;
		position:relative;
		margin:0 auto;
		background-color: #fafafa;
		box-shadow:1px 1px 3px #333;
		padding:12px;
	}
	main *{
		border-radius:4px;
		vertical-align: top;
		clear: left;
		min-height: 50px;
	}
	header,
	footer,
	aside,
	.content div{
		border:1px solid #000;
		padding:12px;
	}
	.inline > *{
		float:left;
		width: 50%;
		clear: right;
		height: 160px;
	}
	.inline .content{
		width:70%;
	}
	.inline .content > div{
		height:100px;
	}
	.inline	aside{
		height:400px;
		width:30%;
	}
</style>
</head>
<body>
	<main>
		<header></header>
		<div class="content inline">
			<div></div>
			<div></div>
		</div>
		<div class="inline">
			<div class="content">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<aside></aside>
		</div>
		<footer></footer>
	</main>
</body>
</html>

Entrar

Criação de layout

Pergunta

Yanna Silva

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

lowys

Link para o comentário

Compartilhar em outros sites

wash

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades