Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Moving div down without moving rest of the content

Tags:

html

css

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>
like image 972
gwerd Avatar asked Oct 28 '25 16:10

gwerd


1 Answers

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.

like image 124
Jamie Barker Avatar answered Oct 31 '25 07:10

Jamie Barker



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!