How to force a div to be ignored?

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>

Adding position: absolute; to the end of .timeLabel does what you want I think. — Imulate, Jan 29 '17 at 00:19

score 0 · Answer 1 · answered Jan 29 '17 at 00:43

0

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 :)

answered Jan 29 '17 at 00:43

Rohit Singh

184
6

If you do not have a certain technical solution, post it as a comment. When you express an uncertainty and your answer is a guess it is more like a question or request for clarification than a solution. – clearlight Jan 29 '17 at 01:15
Take the [2-Minute Tour](http://stackoverflow.com/tour) to see how the site works. If you do a few things you'll learn the basics and start getting reputation points so you can comment on any question or answer, and start to get more privileges here. – clearlight Jan 29 '17 at 01:16

score 0 · Answer 2 · answered Jan 29 '17 at 01:16

0

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

answered Jan 29 '17 at 01:16

Johannes

64,305
18
73
130

score 0 · Accepted Answer · edited May 23 '17 at 12:08

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

How to force a div to be ignored?

3 Answers3