CSS Colocando conteúdo dividido em uma página

Natanael Marrafon Rocha · 22 de março de 2019

Dif, estou fazendo um trabalho do curso e consigui fazer a primeira parte que é essa colocar os elementos do lado do outro:

só que estou tentando fazer a segunda parte que é colocar os elementos do lado do outro abaixo dessa parte com o separador <hr/>

e não estou conseguindo, no final eu tenho que coloca outro <hr/> para fazer a parte mais abaixo e o hr vai parar junto com esse nessa foto acima, tem maneira melhor de fazer isso ? olha como fica :

O meu código é esse :

	<!DOCTYPE HTML>
<html lang="pt-br">
	<head>
		<meta charset="utf-8"/>
		<title>DC COMICS MARVEL</title>
	</head>
	<body>
		<header id="cabecalho">
			<figure>
				<img id="banner" src="imagens/banner.jpg" />
			</figure>
		</header>
		<div id="container">
			<div class="descricao-conteiner">
				<div class="titulo">
					<p>SERIADOS MARVEL<P>
				</div>
				<div class="imagem-marvel">
				<figure>
					<img src="imagens/agent-carter.jpg" alt="Agent Carter Marvel"/>
					<figcaption class="descricao-imagem">Agent Carter</figcaption>
				</figure>
				</div>
				<div id="comentario">
					<form method="post" action="">
						<input type="text" name="Buscar" /><input type="image" src="imagens/lupa.jpg" />
					</form>
				<p class="descricao-seriado">
				As Séries de Televisão do Universo Cinematográfico Marvel São shows americanos de televisão de super-herói, com base
				em personagens que aparecem nas publicações da Marvel Comics.</p><br/>
				<p class="descricao-seriado">
				As séries estão em produção desde 2013, e nesse tempo Marvel Television e ABC Studios já estreou quatro séries,
				com mais oito em vários estágios de Desenvolvimento.</p><br/>
				<p class="descricao-seriado">
				As séries estão em produção desde 2013, e nesse tempo Marvel Television e ABC Studios já estreou quatro séries,
				com mais oito em vários estágios de Desenvolvimento.</p><br/>
				<p class="descricao-seriado">
				As séries estão em produção desde 2013, e nesse tempo Marvel Television e ABC Studios já estreou quatro séries,
				com mais oito em vários estágios de Desenvolvimento.</p><br/>
				</div>
				<div class="imagem-marvel">
					<figure>
						<img src="imagens/agents-of-shield.jpg" alt="Agents Of Shield Marvel"/>
						<figcaption class="descricao-imagem">Agents Of Shield</figcaption>
					</figure>
				</div>
				<div class="imagem-marvel">
					<figure>
						<img src="imagens/demolidor.jpg" alt="Demolidor Marvel"/>
						<figcaption class="descricao-imagem">Agents Of Shield</figcaption>
					</figure>
				</div>
				
				<hr/>
				
				<div class="titulo">
					<p>SERIADOS DC COMICS</p><br/>
				</div>
				<div class="descricao-dc">
					<p class="descricao-seriado">A relação entre os quadrinhos e a televisão nunca esteve tão bem quanto agora, o que torna realmente fácil
					estar perdido em meio a tantos programas de qualidade sobre heróis, zumbis e possessões deminíacas.<p><br/>
					<p class="descricao-seriado">A relação entre os quadrinhos e a televisão nunca esteve tão bem quanto agora, o que torna realmente fácil
					estar perdido em meio a tantos programas de qualidade sobre heróis, zumbis e possessões deminíacas.<p><br/>
				</div>
				<div>
					<figure id="figure-arrow">
						<img src="imagens/arrow.jpg" alt="Arrow Marvel"/>
						<figcaption id="descricao-imagem-arrow">Arrow</figcaption>
					</figure>
				</div>
				<div id="tabela1">
					<p id="titulo-series">SÉRIES DE TELEVISÃO<p>
					<table id="imagem-dc">
						<tr>
							<td>TÍTULO</td>
							<td>DURAÇÃO</td>
							<td>TEMPORADA</td>
						</tr>
						<tr>
							<td>Batman</td>
							<td>1966-1968</td>
							<td>3</td>
						<tr>
						<tr>
							<td>Shazam</td>
							<td>1974-1976</td>
							<td>3</td>
						</tr>
						<tr>
							<td>Smailville</td>
							<td>2001-2011</td>
							<td>10</td>
						</tr>
					</table>
				</div>
				<div>
					<figure id="figure-Gotham">
						<img src="imagens/gotham.jpg" alt="Gotham Marvel"/>
						<figcaption id="descricao-imagem-gotham">Gotham</figcaption>
					</figure>
				</div>
			</div>
		</div>
	</body>
</html>

			* {margin:0; padding:0;}
			
			body {
				background-color:gray;
				text-align:center;
			}
			
			#banner {
				width:1600px;
				height:400px;
			}
			
			#container {
				width:1000px;
				height:2000px;
				margin:auto;
				background:white;
			}
			
			
			/*------- SERIADOS MARVEL -------*/
			
			.titulo {
				text-align:left;
				margin-left:25px;
				font:bold 15px arial;
			}
			
			.imagem-marvel {
			width:500px;
			height:auto;
			float:left;
			margin:0;
			}
			
			.descricao-imagem {
				text-align:left;
				margin-left:25px;
				font:bold 13px arial;
			}
			
			#comentario {
				width:450px;
				height:269px;
				margin:0 10px 0 530px;
			}
			
			#comentario form {
				text-align:left;
			}
			
			.descricao-seriado {
				font:bold 12px arial;
				text-align:left;
			}
			
			/*--------- SERIADOS DC COMICS --------*/
			
			.descricao-dc {
				width:450px;
				margin-left:25px;
				float:left;
			}
			
			#figure-arrow {
				width:450px;
				text-align:left;
				margin-left:25px;
				
			}
			
			#descricao-imagem-arrow {
				text-align:left;
				font:bold 12px arial;
				width:450px;
			}
			
			#imagem-dc {
				float:left;
				margin:10px 0 0 100px;
			}
			
			#imagem-dc tr td {
				padding-right:30px;
				font:bold 17px arial;
			}
			
			#titulo-series {
				margin:15px 0 0 25px;
				font:bold 15px arial;
				text-align:left;
			}
			
			#figure-Gotham {
				margin:15px 0 0 25px;
				float:left;				
			}

			#descricao-imagem-gotham {
				text-align:left;
				font:bold 13px arial;
			}

Sei que pode estar meio bagunçado o código estou tentando aprender na prática... Obrigado desde já!

DiF · 22 de março de 2019

@Natanael Marrafon Rocha Olá, meio que não entendi... você quer adicionar o <hr/> onde exatamente?

também acredito que o ideal seria você adicionar as imagens como background do elemento e não com img.

Pelo menos nas partes como o cabeçalho...

Natanael Marrafon Rocha · 28 de março de 2019

Em 22/03/2019 às 05:25, DiF disse:

@Natanael Marrafon Rocha Olá, meio que não entendi... você quer adicionar o <hr/> onde exatamente?

também acredito que o ideal seria você adicionar as imagens como background do elemento e não com img.

Pelo menos nas partes como o cabeçalho...

Então Dif, eu estou tentando fazer com que a tabela, imagem, escrita fiquem uma do lado da outra, e quando for trocar de conteúdo colocar a tag <hr/> para concluir e colocar outro conteúdo o primeiro conteúdo eu consegui colocar mas o segundo ta difícil e sempre que consigo o <hr/> fica junto com o outro acima ele flutua, tem um modo certo de eu fazer esse post ? os elementos nunca ficam do lado certo...

DiF · 28 de março de 2019

@Natanael Marrafon Rocha Bem agora que explicou, eu reparei melhor nas imagens.

Basicamente não é o <hr/> que está dando problema, mas sim o tamanho do elemento que excede o limite da área então empurra a imagem para baixo.

Pelo que eu vi você usa muito float left nos elementos. Acredito que o erro está no CSS.

Ademais, você pode usar o o flex para deixar lado a lado, podes usar o display: table, podes usar o display: inline-block...

Alguns elementos ali tem tamanhos enormes

Uma dica, quando cria o layout, crie a estrutura e colore as áreas com background para saber os limites e então sempre nas imagens coloque um tamanho que fique certo.