Element Not Moving from Top

Element not moving from top

The parent btnClass need a height

Note, a div's width defaults to browser viewport, its height by its content or explicit set, hence the left: 15% work but the top: 20% not

.btnClass {

  position: relative;

  height: 200px;

}

p {

  position: absolute;

  top: 20%;

  left: 15%;

  border: 1px solid red;

  display: block;

}

<div class="btnClass">

  <p>ghghg</p>

</div>

CSS position of element not moving

That's because .alignNav is too high

.alignNav {
     text-align: right;
    position: relative;
    padding-top: 6px;
    height: 110px;
}

Setting its height to 100px, or giving extraContainer2 relative positioning with negative top will fix the problem

#extraContainer2
{
    position: relative;
    top: -5px;
}

Margin-top won't move individual elements

Another option is to put a position to the label tag and this tag have a relative position and you can change top and right to move when you want.

body {

 margin: 0;

}

p.name {

 font-family: "Roboto";

 margin-top: 90px;

 margin-left: 50px;

 margin-bottom: 0;

 border: 1px solid black;

 display: inline-block;

 padding: 20px 70px;

 font-size: 25px;

}

  

div.info {

 margin-left: 50px;

 border: 1px solid black;

 padding: 20px 13.5px 20px;

 border-top: none;

 display: inline-block;

 margin-bottom: 0;

}

label{

    position:relative;

    top:50px;

    right:100px;

}

div.date {

 margin-left: 50px;

 border: 1px solid black;

 border-top: none;

 display: inline-block;

 padding: 0px 17px 0px;

 text-align: center;

}

form {

 display: inline-block;

 margin-left: 100px;

}

textarea {

  width: 300px;

  height: 150px;

  display: inline-block;

  padding: 12px 20px;

  box-sizing: border-box;

  border: 2px solid #ccc;

  border-radius: 4px;

  background-color: #f8f8f8;

  font-size: 16px;

  resize: none;

}

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="profile.css">

<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>

</head>

<body>

<p class="name">henWrek</p>

<form>

<label class="label-prueba" for="fname"> Profile <br> Comments:</label>

<br>

<textarea>Enter your comment here...</textarea>

</form>

<br>

<div class="info">

<img src="default.jpg" height="200" width="210">

</div>

<br>

<div class="date">

<p>Joined: 11/1/2018</p>

<p>Last Online: 11/9/2018 3:21PM</p>

<p>Post Count: 2</p>

</div>

</body>

</html>

Bottom div not moving when top div changes height

There is a fixed height set on the two columns on the page. If you remove this pixel height, the footer will adjust as you change the tabs.

try adding this to your css:

.col-md-8, .col-md-4{
    height: unset !important;
}

Why is Margin-Top Not Moving Something?

<a> default CSS value is inline so try changing it to inline-block or block whatever suits you better.

So:

.DSLBlurb a {
    color: white;
    margin-top: 10px;
    margin-left: 16px;
    display: inline-block;
}

Element Not Moving from Top