Moving div down without moving rest of the content

Question

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>

have your tried positioning? like `position:relative;` or `position:absolute;`? — Sam Teng Wong, Jul 15 '15 at 08:12
I wanted to stick to normal flow. I want to try and stay away from positioning if possible. — gwerd, Jul 15 '15 at 08:16
Is [this](http://stackoverflow.com/a/23584310/2591007) what you want? — David Mann, Jul 15 '15 at 09:09

Jamie Barker · Accepted Answer · 2015-07-16T08:33:28.347

3

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.

edited Jul 16 '15 at 08:33

answered Jul 15 '15 at 08:55

Jamie Barker

8,145
3
29
64

I totally misread OP's post, until I read your answer. I removed my answer since it was so far off. – David Mann Jul 15 '15 at 09:01
@DSMann8 I posted a comment asking them to clarify because they don't actually specify where they want it aligning to. I've used my best judgement based upon them wanting to move it down. I don't think it's an accident that 2 other people came to the same conclusion and gave a similar answer to you ;) – Jamie Barker Jul 15 '15 at 09:04
I'm pretty sure you've interpreted it right. The OP say's he want's to move the div down, not over. That along with the fact that his markup has both a left and right rule adds credence to your answer. I've submitted an edit making this more clear. – David Mann Jul 15 '15 at 09:05

Moving div down without moving rest of the content

1 Answers1