changing margin-top affect other places

Question

I hope somebody can help me, i know here is much code, but couldnt figure it out myself, question is when i increase margin-top of #col1 p{ for example from 50 to 80 or what ever, then suddently right part of page comes also down (#col2) how to stop it and where is the problem and why it just affects right side and not left side, i'm just improving my skills on 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 &copy; hhh</p>
 </div>




</body>
</html>

simply because you added a big negative margin to the col2 to pull it to the top as it supposed to be under the col1 ... I advise to rethink the code as there is a lot of bad floating issue, and better remove them then trying to fix them — Temani Afif, Jun 01 '18 at 00:06
@Temani Atif yes, i put big negative margin to col2 cuz cudnt figure out how else i could pull that to the top, could you help with that also ? — waleedd32, Jun 01 '18 at 00:09
You should not pull it to the top like this ... You structure is a 3 column strucutre so focus on how you can implement a 3 column structure, don't simply try to force things with big negative values — Temani Afif, Jun 01 '18 at 00:10
here is a good start : https://stackoverflow.com/questions/20566660/3-column-layout-html-css .. by redoing your code properly you will fix all the issue at the same time — Temani Afif, Jun 01 '18 at 00:11
more relevant question to get more ideas : https://www.google.com/search?q=3+column+css+site:stackoverflow.com&sa=X&ved=0ahUKEwjXgKLolrHbAhXLtRQKHeVqDoIQrQIIRygEMAI&biw=1600&bih=745 — Temani Afif, Jun 01 '18 at 00:13

score 0 · Answer 1 · answered Jun 01 '18 at 02:19

    #col1 p {
        width: 460px;
        font-family: "Times New Roman", Times, serif;
        font-size: 16px;
        margin-top: 80px;

    }



    #col2 {
        width: 210px;
        margin: 20px 15px;
        padding: 15px;
        float: right;
        margin-top: -453px;

    }

so after looking at your code it seems you've hard coding everything in your css. While this is working for the most part, there are much easier ways to go about this. You might want to look into Bootstrap, it is a great tool for front end web design. (look into BootStrap Grid System in particular, but if you're interested it has tons of other tools that make designing much easier)

As for you margin top issue, in order to change margin-top for #col1 you'll have to also change margin-top for col2. In your example you mentioned changing #col1 margin-top from 50px to 80px as an example. I went ahead and manipulated the pixels to bring col1 down and keep col2 up. It's a matter of playing with the numbers. Hope this helped!

score 0 · Answer 2 · answered Jun 01 '18 at 04:47

This happens because

You haven't set float in #content

Remove margin-left from #content
Remove negative margin from #col2

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;
  float: left;
}
#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;
}

<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 &copy; hhh</p>
 </div>

Thanks man, yeah i forgot to put float on content, but why is that when instead of putting float in content but puting it in #col1 is not working ? what is the difference whether in #content or #col1 ? — waleedd32, Jun 02 '18 at 12:58
If you want the layout the way you want, you need to set float for all three column, or the element will face problem of clearfix. — Zuber, Jun 03 '18 at 07:00

changing margin-top affect other places

2 Answers2