float: left; oraz both: clear; "footer" jest rozciągnięty

pytanie zadane 11 czerwca 2016 w HTML i CSS przez TestowanieTak Nowicjusz (120 p.)

Witam ostatnio zacząłem bawić się w html i css robiąc stronę napotkałem na problem z clear: both;

strona wygląda o tak http://screenshot.sh/mGxzMoFcnFIUL chciałbym aby tło tam gdzie pisze "cos tam content" oraz jest dziewczyna było jasnoniebieskie

<!DOCTYPE HTLM>

<html lang="pl"

<head>

	<meta charset="utf-8">
	<title> Animce </title>
	<meta name="description" conten= "Strona poświecona anime" />
	<meta name="keywords" content= "Anime, Manga" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chroma=1" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	

</head>

<body>

	<div id="container">
		<div id="logo">
		Animce
		</div>
		
		<div id="menu">
			<div class="options">Top10 </div>
			<div class="options">Animce</div>
			<div class="options">Manga</div>
			<div class="options">O Nas</div>
			<div class="options">Kontakt</div>
		</div>
		
		<div id="sidebar">
		<img src="image/Fate_zero_sakura.png" />
		</div>
		
		<div id="content">
		cos tam content
		</div>
			<div style="both: clear;"> </div>
			
		<div id="footer">
		&copy; Wszelkie prawa zastrzeżone
		</div>
		
	</div>


</body>


<html>

body
{
	background-color: lightblue;
	font-size: 22px;
}
#container
{
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;
}
#logo
{
	letter-spacing: 2px;
	font-size: 44px;
	color: #ffffff;
	text-align: center;	
	padding: 10px;
	background-color: #42BDF2;
}
#menu
{
	background-color: #303030;
	color: #ffffff;
	text-align: center;
	min-height: 45px;
}
.options
{
	float: left;
	letter-spacing: 1px;
	padding: 5px;
	font-size: 30px;
	padding-right: 40px;
	padding-left: 40px;
	text-align: center;
}
.options:hover
{
	background-color: #ffffff;
	color: #42BDF2;	
}
#sidebar
{
	padding: 10px;
	color: #ffffff;
	float: left;
}
#content
{
	float: left;	
	color: white;
	width: 660px;
	min-height: 600;
	padding: 10px;
}
#footer
{
	both: clear;
	text-align: center;
	color: #ffffff;
	padding: 10px;
	background-color: #000000;
}

1 odpowiedź

odpowiedź 11 czerwca 2016 przez Eimens Maniak (69,240 p.)

Dla #sidebar, #content dodaj parametr background z jasnoniebieskim kolorem, ja osobiście zrobił bym jednego diva w którym był by styl koloru a w nim te dwa elementy