Move div down without moving the rest of the content
I have a border that I'm trying to vertically align with some text, and every time I try to move it, the rest of my content moves downward, making this task impossible. As you can see in my image below, the border is above the text and I want it to be vertically aligned.
#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>
+3
source to share
1 answer
Sounds like you want it to line up to the middle of the text on each side. For this task, I would use the :before
and pseudo selectors :after
.
#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 border to move the lines closer or further.
+3
source to share