Gdzie zrobiłam błąd w kodzie? HTML, divy nie chcą ułożyć się szeregowo

pytanie zadane 31 stycznia 2017 w Nasze projekty przez szejkus Użytkownik (540 p.)

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<title>The XX</title>
	<meta name="desctription" content="Znajdziesz tutaj informacje odnośnie zespołu The XX"</>
	<meta name="keyworlds" content="sztuka, muzyka, thexx" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
	
	<style>
		#container
		{
			width: 1000px;
			margin-left: auto;
			margin-right: auto;
		}
		
		#logo
		{
			background-color: black;
			color: white;
			text-align: center;
			padding: 15px;
		}
		
		#content
		{
			float:left;
			padding: 15px;
			width: 80%;
		}
		
		#nav
		{
			float: left;
			padding: 10px;
			width: 20%;
			min-height: 640px;
			text-align: center;
			background-color: grey;
			color: white;
		}
		
		#footer
		{
			clear: both;
			background-color: black;
			color: white;
			text-align: center;
			padding: 15px;
			width: 100%;
		}
	</style>
</head>

<body>
	<div id="container">
		<div id="logo">
			<h1>The XX</h1>
		</div>
		
		<div id="content">	
			<h3>Informacje</h3>
			Angielski zespół indie pop założony w Londynie w 2005 roku. Ich muzykę cechują unikatowe partie wokalne oraz pomysłowe wykorzystywanie sampli niskich częstotliwości.
			<br/> <br/>
			Grupa wydała swój debiutancki album „xx” w sierpniu 2009. Płyta szybko zyskała międzynarodowe uznanie, przynosząc grupie spory rozgłos. W 2010 roku zespół został uhonorowany Mercury Prize. Ich drugi album został wydany 10 września 2012. [2].
		<div>
		
		<div id="nav">
			Informacje <br/>
			Historia <br/>
			Dyskografia <br/>
			Galeria <br/>
		</div>
		
		<div id="footer">
			The XX &copy: Wszelkie prawa zastrzezone
		</div>
	</div>

</body>
</html>

1 odpowiedź

odpowiedź 31 stycznia 2017 przez mtk3d Nałogowiec (46,690 p.)
wybrane 6 stycznia 2018 przez szejkus

Najlepsza

<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>The XX</title>
<meta name="desctription" content="Znajdziesz tutaj informacje odnonie zespou The XX"</>
<meta name="keyworlds" content="sztuka, muzyka, thexx" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />

<style>
#container
{
width: 1000px;
margin: 0 auto;
}

#logo
{
background-color: black;
color: white;
text-align: center;
padding: 15px;
}

#content
{
float:left;

width: 80%;
}

#nav
{
float: left;

width: 20%;
min-height: 640px;
text-align: center;
background-color: grey;
color: white;
}

#footer
{
clear: both;
background-color: black;
color: white;
text-align: center;
padding: 15px;
width: 100%;
}
</style>
</head>

<body>
<div id="container">
<div id="logo">
<h1>The XX</h1>
</div>

<div id="content"> 
<h3>Informacje</h3>
Angielski zesp indie pop zaoony w Londynie w 2005 roku. Ich muzyk cechuj unikatowe partie wokalne oraz pomysowe wykorzystywanie sampli niskich czstotliwoci.
<br/> <br/>
Grupa wydaa swj debiutancki album xx w sierpniu 2009. Pyta szybko zyskaa midzynarodowe uznanie, przynoszc grupie spory rozgos. W 2010 roku zesp zosta uhonorowany Mercury Prize. Ich drugi album zosta wydany 10 wrzenia 2012. [2].
</div>

<div id="nav">
Informacje <br/>
Historia <br/>
Dyskografia <br/>
Galeria <br/>
</div>

<div id="footer">
The XX &copy: Wszelkie prawa zastrzezone
</div>
</div>

</body>
</html>

Padding powiększa elementy, i dlatego nie mieściły się obok siebie. Nie robi się tego w ten sposób, tylko np. tekst w sekcjach dajesz w znaczniki <p> i dopiero jemu nadajesz padding, albo margin.

komentarz 1 lutego 2017 przez szejkus Użytkownik (540 p.)

Dalej nie działa tak jak powinno, specjalnie dałam taką szerokość, żeby się na pewno zmieściło.

<style>
        #container
        {
            width: 1000px;
            margin: 0 auto;
        }

        #logo
        {
            background-color: black;
            color: white;
            text-align: center;
            padding: 15px;
        }

        #content
        {
            float:left;
            width: 700px;
        }

        #nav
        {
            float: left;
            width: 200px;
            min-height: 640px;
            text-align: center;
            background-color: grey;
            color: white;
        }

        #footer
        {
            clear: both;
            background-color: black;
            color: white;
            text-align: center;
            padding: 15px;
            width: 1000px;
        }
    </style>

komentarz 1 lutego 2017 przez ketnasar_77 Początkujący (480 p.)

     
       #content
{
float:left;
 
width: 75%;
}
         

         
       
         
        <div id="content">    
            <h3>Informacje</h3>
            Angielski zespół indie pop założony w Londynie w 2005 roku. Ich muzykę cechują unikatowe partie wokalne oraz pomysłowe wykorzystywanie sampli niskich częstotliwości.
            <br/> <br/>
            Grupa wydała swój debiutancki album „xx” w sierpniu 2009. Płyta szybko zyskała międzynarodowe uznanie, przynosząc grupie spory rozgłos. W 2010 roku zespół został uhonorowany Mercury Prize. Ich drugi album został wydany 10 września 2012. [2].
        </div>

Nie zamknąłeś jednego diva o id content , a nie divy nie układają się na siebie bo łącznie mają więcej niż 1000px szerokości, za sprawą paddingów i marginów

Aby rozwiązać problem wystarczy, że zmiejszysz szerokość diva content na np.75%