Я надеюсь, что кто-то может мне помочь, я знаю, что здесь много кода, но сам не могу понять это, вопрос в том, когда я увеличу маржинальную вершину # col1 p {например, с 50 до 80 или что-то еще, тогда внезапно верночасть страницы также сводится (# col2), как ее остановить и в чем проблема, и почему она влияет только на правую, а не на левую сторону, я просто улучшаю свои навыки на CSS
<!DOCTYPE html>
<html>
<head>
<title>Sivu</title>
<meta charset="utf-8"/>
<style>
body{
width:960px;
margin:auto;
border: 1px solid #878787;
}
/*Poistetaan html-elementtien oletusmarginaalit. Yleensä sotkee asettelun.*/
h1, h2, p{
margin:0;
}
#header{
width:100%;
height:200px;
/*Kaksi kuvaa päällekkäin*/
background-image:url(logo.png),url(kuva1.jpg);
background-repeat:no-repeat;
}
#universitaslorem{
width:100%;
height:70px;
background-color:#80ced6;
position:relative;
color:white
}
h1 span{
font-size: 60px;
}
#header-content{
position: absolute;
bottom: 0;
left: 0;
}
#header-content h1{
font-family: Broadway, Castellar, fantasy;
font-size: 35px;
}
#navigation ul{
list-style-type:none;
margin:0;
padding:0;
}
#navigation li{
display:inline;
float:left;
}
#navigation a:link,a:visited{
display:block;
font-weight:bold;
color:#fff;
background-color:#80ced6;
padding:4px;
padding-left:9px;
text-decoration:none;
}
#navigation a:hover{
background-color:#5f0082;
}
.jatkoanavigaatiolle{
background-color:#80ced6;
color:#fff;
padding:4px;
}
#content{
width:460px;
margin-left: 170px;
overflow: hidden;
padding:10px;
}
#content img{
margin-top: 70px;
float:right;
}
#col1 p{
width:460px;
font-family:"Times New Roman", Times, serif;
font-size: 16px;
margin-top:50px;
}
#col2{
width:210px;
margin: 20px 15px;
padding: 15px;
float: right;
margin-top: -373px;
}
.resources h3{
background-color:#80ced6;
color:white;
}
.resoucesborder{
border-bottom: 2px solid #878787;
line-height: 29px;}
#col2 fieldset{
border:solid 2px black;
}
#col4{
float:left;
width:210px;
}
#col4 img{
float:right;
}
#nappi{
/*Kuva buttoniin*/
background-image:url("button.png");
width:185px;
height:55px;
margin:15px 0px;
}
#footer{
clear:both;
width:958px;
background-color:#80ced6;
text-align:center;
padding:5px 0px;
}
</style>
</head>
<body>
<div id="universitaslorem">
<div id="header-content"><h1><span>U</span>jyjtgjyty</h1></div>
</div>
<div id="header">
</div>
<div id="navigation">
<ul>
<li><a href="#">ffffs</a></li>
<li><a href="#">uuuu</a></li>
<li><a href="#">cccc</a></li>
<li><a href="#">gggg</a></li>
</ul>
</div><div class="jatkoanavigaatiolle"> .</div>
<div id="col4">
<h3>nnnn</h3>
<h3>Ddddd</h3> <img src="kuva4.jpg" alt="Statue"></img>
<p>Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum dolor
</p>
<h3>aiii</h3>
<img src="kuva3.jpg" alt="Statue"></img>
</div>
<div id="content">
<img src="kuva2.jpg" alt="Statue"></img>
<div id="col1">
<h1>ooooooo</h1>
<p>
LoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLorem ipsum dolor sit amet. consecteturadipiscin elit. VAenean dui libero, accumsan non elementum id. ullamcorper sit amet sem.Lorem ipsum dolor sit amet. consectetur adipiscin elit.
</p><p>
Lorem ipsum dolor sit amet. consectetur adipiscin elit. Vivamusaccumsan lacinia ante. at placerat nisl commodo nec. Aenean dui libero. accumsan non elementum id. ullamcorper sit amet sem.
</p>
<p>Lorem ipsum dolor sit amet. consectetur adipiscin elit. Vivamusaccumsan lacinia ante. at placerat nisl commodo nec. Aenean dui libero. accumsan non elementum id. ullamcorper sit amet sem.
</p>
</div>
</div>
<div id="col2">
<div class="resources"> <h3>Resources for</h3></div>
<div class="resoucesborder">eee</div>
<div class="resoucesborder">sss</div>
<div class="resoucesborder">fff</div>
<div class="resoucesborder">gggg</div>
<div >eee</div>
<div class="resources"> <h3>hhh</h3>
<p>Lorem ipsum dolor sit amet. consectetur adipiscin elit. Vivamusaccumsan lacinia ante. at placerat nisl commodo nec. Aenean dui libero. accumsan non elementum id. ullamcorper sit amet sem.
</p>
</div>
</div>
<div id="footer">
<p>fffffff </p>
<p>Copyright © hhh</p>
</div>
</body>
</html>