CODEWITHSUNDEEP
htmlcss
gwerd
gwerd

Reputation: 155

Moving div down without moving rest of the content

I have a border I am trying to align vertically with some text and every time I try and move it down the rest of my content moves down making it impossible to complete this task. As you can see in my picture below, the border is above the text and I want it vertically aligned.

enter image description here

#work {
  color: #a5a5a5;
  font-family: Hobo Std;
  font-size: 1.3em;
  text-align: center;
}
.leftrule {
  border-top: 2px solid #a5a5a5;
  width: 100px;
  margin-left: 30%;
}
.videos {
  margin-top: 50px;
}
.dancer-vid-left {
  background-image: url(images/dancer2.png);
  background-repeat: no-repeat;
  height: 300px;
}
#video1 {
  border: 15px solid #373636;
  box-shadow: 0px 0px 0px 8px rgba(55, 54, 54, .3);
  background-color: #373636;
  width: 480px;
}
<div class="leftrule"></div>
<p id="work">My Work!</p>
</div>
<div class="rightrule"></div>

<div class="row videos">
</div>

<div class="col-md-6">
  <div id="video1">
    <iframe frameborder="0" height="315" src="https://www.youtube.com/embed/Q3bEF0PHR00" width="450"></iframe>
  </div>
</div>

<div class="col-md-6">
  <div id="video2">
    <iframe frameborder="0" height="315" src="https://www.youtube.com/embed/Q3bEF0PHR00" width="450"></iframe>
  </div>
</div>

Upvotes: 4

Views: 262

Answers (1)

Jamie Barker
Jamie Barker

Reputation: 8246

It sounds to me like you want it aligned to the middle of the text either side. I would use :before and :after pseudo selectors for this task.

#workcontainer {
  text-align: center;  
}
#work {
  color: #a5a5a5;
  font-family: Hobo Std;
  font-size: 1.3em;
  position: relative;
  display: inline-block; /* This element needs to not flow the whole width, so we place it in a container and inline-block this */
}
#work:before, #work:after {
  content: '';
  border-bottom: 2px solid #a5a5a5;
  width: 100px;
  top: 50%;
  position: absolute;
}
#work:before {
  left: 100%;
  margin-left:20px;
}
#work:after {
  right: 100%;
  margin-right:20px;
}
<div id="workcontainer">
  <p id="work">My Work!</p>
</div>

Just increase or decrease the margin to move the lines closer or further away.

Upvotes: 3

Related Questions