How to force a div to be ignored? - html

Question

I'm new at CSS and am going through tutorials, etc. All good – but I'm stuck on the little design below. I am trying to make the layout ignore the horizontal box with the timestamp and I've tried everything – float, position absolute, relative, margins, etc. and at this point I am just throwing tags in without having a clue.
What I am trying to accomplish is for the vertical red box - the "leader line" to connect to the large box below through ignoring the "timestamp" box. Maybe I have structured my HTML poorly and that is making it harder for me to accomplish this?
This is probably pretty simple. I've also been wrestling with the uneven margin around the image but that's less important.
The "Leader line" is of the "vAxis" class. The "timeStamp" block is of the "timeLabel" class.
I made a codePen if the snippet below isn't clear.
Update:
I just realized that I don't have to try to ignore the div with the timestamp. I can just make it use a border-left to continue to draw the vertical. Don't know if that means I am clever, hacky or just getting with the "CSS" way of thinking. The reason I couldn't use absolute is because I want to use this code for multiple components in a Vis.js timeline – and their vertical positions will vary.
I've updated the codepen
Original issue:
body {
background-color: #000;
}
.hAxis {
width: 100%;
height: 10px;
border-bottom: 4px solid #ffffff;
}
.outsideDiv {
position: absolute;
left: 220px;
}
.vAxis {
width: 50px;
height: 100px;
outline: 1px solid red;
border-left: 6px solid rgba(255, 255, 255, .5);
;
}
.box-4 {
background-color: #011c21;
background: -webkit-linear-gradient(90deg, #1A333D 0%, #030506 100%);
border: 6px solid rgba(255, 255, 255, .5);
width: 330px;
padding: 6px;
}
.box-4:hover {
border: 6px solid rgb(255, 255, 255);
}
.box-4:active {
border: 6px solid rgb(255, 255, 0);
}
.imageDiv {
box-align: center;
display: inline-block;
margin-left: 5px;
margin-right: auto;
}
img {
outline: 1px solid #000;
}
.timeLabel {
color: #D0D1D9;
background: transparent;
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
font-weight: bold;
margin-bottom: 2px;
text-align: right;
text-shadow: rgb(13, 52, 181) 6px 6px 10px;
outline: 1px solid red;
margin-left: 100px;
width: 250px;
}
.narrative {
color: #cccccc;
font-size: 24px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
width: 300px;
position: relative;
padding: 10px;
/* text-shadow: rgb(77, 100, 176) 0px 2px 2px; */
}
html {
height: 100%;
}
body {
background-color: #0e1c21;
/* IE9, iOS 3.2+ */
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMxYzM3NDIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI3ZzZ2cpIiAvPjwvc3ZnPg==);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0, rgb(0, 0, 0)), color-stop(1, rgb(28, 55, 66)));
/* Android 2.3 */
background-image: -webkit-linear-gradient(top, rgb(0, 0, 0) 0%, rgb(28, 55, 66) 100%);
/* IE10+ */
background-image: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgb(28, 55, 66) 100%);
}
}
<div class="hAxis"></div>
<div class="outsideDiv">
<div class="vAxis"></div>
<div class="timeLabel">04:35:27</div>
<div class="box-4">
<div class="imageDiv">
<img src="http://placehold.it/320x240/0000ff/000000" width='320' height='240' />
</div>
</div>
<div class="narrative">Cras sit amet maximus at libero, at vehicula justo. Cras sit amet maximus libero, at.
</div>
</div>

Answer 1

In your codepen demo, the red vertical box is already touching the blue box below. So I guess you solved that already.
With regard to the uneven margins around the image, there are several factors in play:
(1) You have set a width on an ancestor container that makes it longer than the image:
.box-4 {
background-color: #011c21;
background: -webkit-linear-gradient(90deg, #1A333D 0%, #030506 100%);
border: 6px solid rgba(255, 255, 255, .5);
width: 330px; <--- REMOVE THIS
padding: 6px;
}
(2) You have set uneven margins on the immediate container. Even them out.
.imageDiv {
box-align: center;
display: inline-block;
margin-left: 5px; <--- REMOVE THIS, AND..
margin-right: auto; <--- THIS
margin: 5px; <-- NEW
}
(3) An image is an inline-level element, so it has vertical-align: baseline set by default. This elevates it within the container. Override the default:
img {
outline: 1px solid #000;
vertical-align: bottom; <--- NEW
}
revised codepen

Answer 2

adding position:absolute can solve the problem by overlaying the timelabel on the box4
But Try
margin-top:-42px;
in the timelabel class, maybe this is the answer you needed :)

Answer 3

Add display: none to .vAxis This hides this DIV completely (I suppose that's what you mean by "ignore"?)
http://codepen.io/anon/pen/JEOwVo?editors=1100