Co jest nie tak w kodzie HTML?

pytanie zadane 17 lipca 2018 w HTML i CSS przez karateka2001 Nowicjusz (180 p.)

Jak otwieram stronę w przeglądarce to lorem ipsum nie chce się ustawić po prawej stronie.  


<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<title>Najlepsze gry</title>
<meta name="description" content="Poznaj 5 najlepszych gier wszechczasów. Czy grałeś w nie wszystkie?"/>
<meta name="keywords" content="gry, gry video, games, PC, komputer, granie"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style1.css" type="text/css"/>
<link rel="stylesheet" href="css/fontello.css" type="text/css"/>

</head>
<body>

	<div id="container">
		<div id="logo"><a href="index.html">Najlepsze gry
		
		</div>
		
		
	<div class="square">
		<div class="tile1">
			<a href="logiczne.html"><i class="icon-puzzle-outline"></i><br/>Logiczne</a>
		</div>
		<div class="tile1">
			<a href="przygodowe.html"><i class="icon-globe-inv"></i><br/>Przygodowe</a>
			
		</div>
		
		<div style="clear:both"/>
		
		<div class="tile2">
			<a href="sportowe.html" ><i class="icon-football"></i><br/>Sportowe</a>
		</div>
		
		<div class="tile2">
			<a href="strategiczne.html"><i class="icon-king"></i><br/>Strategiczne</a>
		</div>
		
		<div style="clear:both"/>
		
		<div class="tile3">
			<a href="symulacyjne.html"><i class="icon-flight"></i><br/>Symulacyjne</a>
		</div>
		
		<div class="tile3">
			<a href="zręcznościowe.html"><i class="icon-wrench-outline"></i><br/>Zręcznościowe</a>
			
		</div>
			
	</div>
		
		<div class="square">
			<div class="tile4">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas lorem mi, faucibus suscipit orci egestas a. Aliquam imperdiet neque ac sapien pulvinar, quis ultrices mi bibendum. Nunc at ultricies magna. Donec eu tincidunt ipsum. Etiam sed odio vitae mi sagittis molestie. Sed molestie ex sed orci maximus, sodales ullamcorper velit consequat. Fusce dictum sit amet nisi eget sagittis. Nam maximus, ipsum eget placerat ornare, arcu nulla finibus tellus, ut vulputate magna risus eget ex. Nulla et dapibus urna, sit amet dignissim nunc. Pellentesque mi neque, dignissim non ante a, convallis luctus lacus. Nam vitae est ultrices turpis maximus tristique
			</div>
		</div>

<div id="footer">
		Najlepsze gry &copy; Wszystkie prawa zastrzeżone
	
	</div>
		
</div>

</body>

</html>

I jeszcze zapis w CSS

body
{
	background-color:#303030;
	color:white;
}
#container
{
	margin-left:auto;
	margin-right:auto;
	width:1000px;
}
#logo
{
padding:20px;
text-align:center;
letter-spacing:2px;

}

.square
{
	width:50%;
	float:left;

}


.tile1
{
	float:left;
	background-color:#3095d3;
	margin:10px;
	width:230px;
	text-align:center;
}
.tile1:hover
{
	background-color:#2084c2;
}

.tile2
{
	margin:10px;
	float:left;
	text-align:center;
	width:230px;
	background-color:#666666;
	
}
.tile2:hover
{
	background-color:#555555;	
}
.tile3
{
	margin:10px;
	float:left;
	text-align:center;
	width:230px;
	background-color:#b79384;
}

.tile3:hover
{
	background-color:#a68273;
}

.tile4
{
	width:420px;
}
#footer
{
	clear:both;
}

3 odpowiedzi

odpowiedź 17 lipca 2018 przez Mariusz08 Maniak (62,280 p.)

Ponieważ w stylach CSS ustawiasz wyrównanie do lewej a nie prawej strony.

komentarz 17 lipca 2018 przez karateka2001 Nowicjusz (180 p.)

Jak mam to rozwiązać?

komentarz 17 lipca 2018 przez Mariusz08 Maniak (62,280 p.)

Ustawić wyrównywanie do prawej.

odpowiedź 17 lipca 2018 przez Ne3yPL Użytkownik (830 p.)

Usuń float: leff

komentarz 17 lipca 2018 przez karateka2001 Nowicjusz (180 p.)

Skąd?

komentarz 17 lipca 2018 przez Ne3yPL Użytkownik (830 p.)

z klasy square

komentarz 17 lipca 2018 przez Ne3yPL Użytkownik (830 p.)
edycja 17 lipca 2018 przez Eryk Andrzejewski

i do .tile4 dopisz text-align: right;

.tile4
{
width:420px;
text-align: right;
}

// Kod proszę umieszczać w bloczku :) ~ Eryk

komentarz 17 lipca 2018 przez karateka2001 Nowicjusz (180 p.)

Nie pomogło

odpowiedź 19 lipca 2018 przez Felix Obywatel (1,100 p.)

Tak to pogmatwałeś że mi głowa rozbolała zresztą proponuję zacząć uczyć się flex-boxa.

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="container">
        <div id="logo">Najlepsze gry
            <a href="#">
        </div>


        <div class="square_one">
            <ul class="one">
                <li>
                    <a href="#">Logiczne</a>
                </li>
                <li>
                    <a href="#">Przygodowe</a>
                </li>
                <li>
                    <a href="#">Sportowe</a>
                </li>
            </ul>
            <ul class="two">
                <li>
                    <a href="#">Strategiczne</a>
                </li>
                <li>
                    <a href="#">Symulacyjne</a>
                </li>
                <li>
                    <a href="#">Przygodowe</a>
                </li>
            </ul>

        </div>

        <div class="square_two">
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas lorem mi, faucibus suscipit orci
                egestas a. Aliquam imperdiet neque ac sapien pulvinar, quis ultrices mi bibendum. Nunc at ultricies magna.
                Donec eu tincidunt ipsum. Etiam sed odio vitae mi sagittis molestie. Sed molestie ex sed orci maximus, sodales
                ullamcorper velit consequat. Fusce dictum sit amet nisi eget sagittis. Nam maximus, ipsum eget placerat ornare,
                arcu nulla finibus tellus, ut vulputate magna risus eget ex. Nulla et dapibus urna, sit amet dignissim nunc.
                Pellentesque mi neque, dignissim non ante a, convallis luctus lacus. Nam vitae est ultrices turpis maximus
                tristique</p>
        </div>

        <div id="footer">
            Najlepsze gry &copy; Wszystkie prawa zastrzeżone

        </div>

    </div>
</body>

</html>

body{
    background: #303030;
    color: #ffffff;
}

#container{
    width: 1200px;
    margin: 100px auto;
    display: flex;
    flex-wrap: wrap;
}

li{
    list-style: none;
}

.square_one{
    display: flex;
}

.square_two{
    width: 450px;
    margin-left: 50px;
}

.one{
    
}

.two{
    
}

li{
    padding: 8px 80px;
    background: #1db84c;
    margin-bottom: 10px;
}

#footer{
}

Popraw to co chcesz dopracuj to żebyś się czegoś nauczył.

I jednym z podstawowych błędów były 2 takie same klasy .square.