W jaki sposób zastosować poniższy układ>

Question

Witam, jak ustawić elementy w następujący sposób?

Mam na myśli to co dzieje się w divie header.

Próbowałem już margin: auto, pozycjonowania za pomocą atrybutu position, ale zawsze mi się to wszystko rozjeżdża.

Z góry dzięki za pomoc i podrzucam kod:

<div id="content">
		<div id="header">
		
			<div id="photo"> <img src="photos/gimnazjum_logo.png" height="250px" width="250px"></div>
			
			<div id="title">Szkoła Podstawowa imienia <br> bł. ks. Józefa Kowalskiego w Siedliskach
			
			<div id="quotation">"Bogactwo i siłę zdobywa się usilną nauką i pracą.<br>
			Nie dość chcieć trzeba czynić."<br>~Goethe</div>
		
		</div>
	</div>

#content
{
	width: 1100px;
	margin-top: 30px;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
	postion: relative;
}

#header
{
	height: 230px;
	width: 1080px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	background-color: #53A5E5;
	position: relative;
}

#photo
{
	float: left;
}

#title
{
	font-size: 48px;
	font-family: 'Bebas Neue';
	font-weight: 700;
	letter-spacing: 3px;
	color: white;
	position: relative;
	top: 50%;
	margin: 0;
	padding: 0;
}

#quotation
{
	font-size: 20px;
	color: black;
	font-style: italic;
	font-family: New Times Roman;
	text-align: right;
	letter-spacing: 0;
	font-weight: 400;
	text-align: right;
}

 

Answer 1

https://codepen.io/pawelnackiewicz/pen/gObeyvM

 

Przede wszystkim, jeśli ustawiasz na sztywno wartości height dla  id=photo=250 oraz hedera=230, to nie dziw się, że to nie będzie pasować. Poprawiłem tam jeszcze kilka innych rzeczy, takich jak:

margin-top:40px;
margin-right: 3px;
margin-bootm: 50px;
margin-left:10px;

//możesz to zapisać jako
margin: 40px 3px 50px 10px;

Więcej możesz znaleźć tutaj

Answer 2

Nie ma powodu aby używać float lub position jeżeli mamy flexbox.

<div class="container">
	<div class="header">
			<div class="left">
				<img src="https://via.placeholder.com/300C/O https://placeholder.com/" alt="">
		  </div>
			<div class="right">
				<div class="empty"></div>
				<div class="top-right">napis wyśrodkowany w pionie względem header</div>
				<div class="bottom-right">cytat pod napisem</div>
			</div>
	</div>
</div>

*{
	margin: 0;
	padding: 0;
}
.container{
	width: 100%;
	height: 100vh;
	background-color: grey;
}
.header{
	display: flex;
	height: 300px;
	background-color: magenta;
	padding: 10px;
}
.left{
	background-color: red;
}
.right{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	width: calc(100% - 300px);
	background-color: blue;
	padding: 20px;
}
.empty{
	padding: 10px;
}
.top-right, 
.bottom-right{
	width: 100%;
	color: #fff;
	border: 2px solid #fff;
	padding: 10px;
	box-sizing: border-box;
}
.bottom-right{
	width: 70%;
		color: #fff;
	border: 2px solid #fff;
	padding: 10px;
	box-sizing: border-box;
}