Zjechany div na dół

pytanie zadane 1 marca 2016 w Sieci komputerowe, internet przez Motrovei Nowicjusz (150 p.)

Cześć, chciał bym poprosić inne osoby które mają większe doświadczenie w tworzeniu stron www o pomoc. Problem polega na zjechanym na dół divie tutaj macie link do zdjęcia http://imgur.com/deNFHDq a tutaj mój kod Css oraz Html

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<title>Blue Cat</title>
	
	<meta name="description" content="Stworzę dla Ciebie wyjątkową stronę www! Zatrudnij programistę webowego: PHP, JavaScript, HTML, CSS, MySQL" />
	<meta name="keywords" content="zamów, stronę, tworzenie, www, programista, portfolio, php, javascript, html, css" />
	
	<link rel="stylesheet" href="style.css" type="text/css"/>
	<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAA1J1hAAMDAwD/iQAAY11WAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAERERERAAAAMzMzMzMwAAMzIiIiIzMAEzIhEREjMxATMhFBQRIzEBMiERQREiMQEyERERERIxATIUEhIUEjEBMhRBEUQSMQEyFEQURBIxATIUEiIUEjEBMhEiMiESMQEyEiMzIhIxADIiMzMyIjAAAzMzMzMzAAAAERERERAADgDwAAwAcAAIADAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAgAMAAMAHAADgDwAA" rel="icon" type="image/x-icon" >
	
	<script src="timer.js"></script>
	
</head>
<body onload="odliczanie();">

    <div id = "container">
	
	<div class="rectangle">
	    <div id ="logo">Blue Cat </a></div>
		<div id ="zegar">12:00:00</div>
		<div style ="clear: both;"></div>
	</div>
	
    <div class = "strap standing">
		<div class ="title1">
            	<br />Test 1
		</div>

		<div class ="title2">
        	    <br />Test 2
		</div>
		
		<div class ="title3">
         	   <br />Test 3
		</div>
		
		<div class ="title4">
			<img src="Kot.jpg"/>
		</div>
		
		<div class ="title5">
        	<br/>
		</div>
		
		<div class ="title6">
        	    <br />Test 5
		</div>
	
		</div>

</body>

body
{
	background: url(img/tlo.png); /*from http://subtlepatterns.com*/
	color: #ffffff;
	font-family: 'Lato', sans-serif;
	font-size: 20px
}

#container 
{
	width: 1000px;
	margin-left: auto; 
	margin-right: auto;
}

.rectangle
{
	width: 960px;
	margin:20px;
	text-align: center;
}

#logo
{
	float: left;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 70px;
	width: 600px;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: left;
}
#zegar
{
	float: left;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 70px;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: left;
}

.title1
{
	margin: 10px;
	width: 190px;
	height: 510px;
	background-color: #0BA1E1 ;
	float: left;
	text-align: center;
} 

.title1:hover
{
    background-color: #0687BF;
} 

.title2
{
	margin: 10px;
	width: 190px;
	height: 400px;
	background-color: #8DD82A;
	float: left;
	text-align: center;
} 

.title2:hover
{
    background-color: #2DAC24;
} 

.title3
{
	margin: 10px;
	width: 190px;
	height: 400px;
	background-color: #F0F712;
	float: left;
	text-align: center;
} 

.title3:hover
{
	background-color: #C3C914;
}

.title4
{
	margin: 10px;
	width: 330px;
	height: 570px;
	background-color: #77706C;
	float: left;
	text-align: center;
} 

.title4:hover
{
    background-color: #57514E;
}

.title5
{
	margin: 10px;
	width: 190px;
	height: 70px;
	background-color: #F0F712;
	float: left;
	text-align: center;
} 

.title5:hover
{
	background-color: #C3C914;
}

.title6
{
	margin: 10px;
	width: 390px;
	height: 200px;
	background-color: #F0F712;
	float: left;
	text-align: center;
} 

.title6:hover
{
    background-color: #C3C914;
}

Dziękuje Wszystkim którzy pomogą :)

2 odpowiedzi

odpowiedź 1 marca 2016 przez Filip2248 Dyskutant (8,840 p.)
wybrane 1 marca 2016 przez Motrovei

Najlepsza

Spróbuj usunąć float:left; z klasy title5

komentarz 1 marca 2016 przez Motrovei Nowicjusz (150 p.)

tak wygląda efekt gdy usunąłem float: left; http://imgur.com/a/pRM5j zdjęcie na dole

komentarz 1 marca 2016 przez Filip2248 Dyskutant (8,840 p.)

No to można by pogrupować te div'y:

test1 i ten żółty div zamknąć w jeden div,

test2,3,5 w drugi,

test4 w trzeci.

HTML:

<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <title>Blue Cat</title>

    <meta name="description" content="Stworzę dla Ciebie wyjątkową stronę www! Zatrudnij programistę webowego: PHP, JavaScript, HTML, CSS, MySQL" />
    <meta name="keywords" content="zamów, stronę, tworzenie, www, programista, portfolio, php, javascript, html, css" />

    <link rel="stylesheet" href="style.css" type="text/css"/>
    <link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAA1J1hAAMDAwD/iQAAY11WAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAERERERAAAAMzMzMzMwAAMzIiIiIzMAEzIhEREjMxATMhFBQRIzEBMiERQREiMQEyERERERIxATIUEhIUEjEBMhRBEUQSMQEyFEQURBIxATIUEiIUEjEBMhEiMiESMQEyEiMzIhIxADIiMzMyIjAAAzMzMzMzAAAAERERERAADgDwAAwAcAAIADAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAgAMAAMAHAADgDwAA" rel="icon" type="image/x-icon" >

    <script src="timer.js"></script>

</head>
<body onload="odliczanie();">

    <div id = "container">

    <div class="rectangle">
        <div id ="logo">Blue Cat </a></div>
        <div id ="zegar">12:00:00</div>
        <div style ="clear: both;"></div>
    </div>

    <div class = "strap standing">

        <div class="column">
            <div class ="title1">
                    <br />Test 1
            </div>

            <div class ="title5">
                <br/>
            </div>
        </div>

        <div class="column">
            <div class ="title2">
                <br />Test 2
            </div>

            <div class ="title3">
                <br />Test 3
            </div>

            <div style="clear: both;"></div>

            <div class ="title6">
                <br />Test 5
            </div>
        </div>

         <div class="column">
            <div class ="title4">
                <img src="Kot.jpg"/>
            </div>
        </div>

    </div>

</body>

CSS:

body
{
    background: url(img/tlo.png); /*from <a href="http://subtlepatterns.com" rel="nofollow" target="_blank" original-title="" title="">http://subtlepatterns.com</a>*/
    color: #ffffff;
    font-family: 'Lato', sans-serif;
    font-size: 20px
}

#container
{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.rectangle
{
    width: 960px;
    margin:20px;
    text-align: center;
}

#logo
{
    float: left;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 70px;
    width: 600px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
}
#zegar
{
    float: left;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 70px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
}

.column
{
    float: left;
}

.title1
{
    margin: 10px;
    width: 190px;
    height: 510px;
    background-color: #0BA1E1 ;
    text-align: center;
}

.title1:hover
{
    background-color: #0687BF;
}

.title2
{
    margin: 10px;
    width: 190px;
    height: 400px;
    float: left;
    background-color: #8DD82A;
    text-align: center;
}

.title2:hover
{
    background-color: #2DAC24;
}

.title3
{
    margin: 10px;
    width: 190px;
    height: 400px;
    float: left;
    background-color: #F0F712;
    text-align: center;
}

.title3:hover
{
    background-color: #C3C914;
}

.title4
{
    margin: 10px;
    width: 330px;
    height: 570px;
    background-color: #77706C;
    float: left;
    text-align: center;
}

.title4:hover
{
    background-color: #57514E;
}

.title5
{
    margin: 10px;
    width: 190px;
    height: 70px;
    background-color: #F0F712;
    text-align: center;
}

.title5:hover
{
    background-color: #C3C914;
}

.title6
{
    margin: 10px;
    width: 390px;
    height: 200px;
    background-color: #F0F712;
    text-align: center;
}

.title6:hover
{
    background-color: #C3C914;
}

Są jeszcze nierówne ale sam pokombinuj :)