divy uciekają mi z paska menu

pytanie zadane 28 lutego 2016 w HTML i CSS przez Szmonex Początkujący (250 p.)

Nie wiem co zrobić aby przy zmniejszaniu okna przeglądarki divy z linkami na podstrony nie uciekały mi z pomarańczowego paska na dół. Jak zrobić aby się nie przesuwały, żeby po prostu przy zmniejszeniu nie było ich widać?

Kod html głównej strony:

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<title>Strona Naszej Klasy</title>
	<meta name="szkoła podstawowa, klasa 6" />
	<meta name="keywords" content="szkoła podstawpwa />
	<meta name="http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link href='https://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
     	</head>
     <body>
     	<div id=:"container">

     		<div id="logo">
     			<h1>SP. Paprotnia Klasa 6</h1>
     		</div>
     		<div id="menu">
     			<div id="one">
                         <a href="#">Menu</a>
     			</div>
                    <div id="two">
                         <a href="Galeria/index.html">Galeria</a>
                    </div>
                    <div id="three">
                         <a href="Uczniowie/index.html">Uczniowie</a>
                    </div>
                    <div id="four">
                         <a href="PlanLekcji/index.html">Plan lekcji</a>
                    </div>
     		</div>
     	</div>
</body>
</html>

Kod css:

body
{
	background-color: #f0f0f0;
	color: #1c1c1c;
}
#container
{
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
}
#logo
{
	background-color: #f0f0f0;
	color: #0abab5;
	text-align: center;
	max-width: 10000px;
	padding: 5px;
	font-size: 30px;
	font-family: 'Lobster', cursive;
}
#menu
{
	background-color: #e5871f;
	max-width: 10000px;
	height: 50px;
	padding: 10px;
}
#one
{
	width: 200px;
	padding: 10px;
	text-align: center;
	font-family: 'Lobster', cursive;
	font-size: 30px;
	float: left;
}
#two
{
	width: 200px;
	padding: 10px;
	text-align: center;
	font-family: 'Lobster', cursive;
	font-size: 30px;
	float: left;
}
#three
{
	width: 200px;
	padding: 10px;
	text-align: center;
	font-family: 'Lobster', cursive;
	font-size: 30px;
	float: left;
}
#four
{
	width: 200px;
	padding: 10px;
	text-align: center;
	font-family: 'Lobster', cursive;
	font-size: 30px;
	float: left;
}
a:link    
{
	color:black; background-color:transparent; text-decoration:none
}
a:visited 
{
	color:black; background-color:transparent; text-decoration:none
}
a:hover   
{
	color:black; background-color:transparent; text-decoration:underline
}
a:active  
{
	color:black; background-color:transparent; text-decoration:underline
}

2 odpowiedzi

odpowiedź 28 lutego 2016 przez Eimens Maniak (69,240 p.)

Źle:

Dobrze:

i działa :D

komentarz 28 lutego 2016 przez Szmonex Początkujący (250 p.)

Nie zauważyłem tego dzięki :)

odpowiedź 28 lutego 2016 przez Głaz997 Bywalec (2,250 p.)

Skoro Pan poniżej odpowiedział na twoje pytanie i problem został rozwiązany chciałbym zauważyć tylko że masz małą literówkę w kodzie.

<meta name="keywords" content="szkoła podstawpwa />

*podstawowa

Pozdrawiam i życzę powodzenia w dalszym kodowaniu :)