How to have 2 variable size divs side by side, with one on the right

Question

I need a space near the top of my page, which should contain a menu on the left, and a tooltip area on the right. As people move the mouse around, or click on things, the text in the tooltip changes.

The code I have come up with sort of works, but it prevents people clicking on the link to stackoverflow in the body. Somehow, some kind of "ghost" area appears "on top" of the link.

Inspecting the page in Chrome shows Chrome thinks the message div is bigger than it appears on screen, overlapping the link.

Any clues how to solve this, or to find a better way to have this tooltip div be where it is?

window.addEventListener('load', () => {
d3.selectAll('span')
  .on("mouseover", function(e) {
    d3.select('#tooltip')
      .text("Hello folks")
  })
  ;
});

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 0.02em;
    line-height: 1.5;
    color: #354052;
}
header {
    width: 100%;
    height: 54px;
    background: #14b2c7;
    color: #ffffff;
    vertical-align: middle;
    overflow: hidden;
    font-size: 2em;
    font-weight: bold;
    white-space: nowrap;
}
#body {
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    padding: 10px;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
div#menu2 {
    color: #14b2c7;
    height:27px;
    overflow: hidden;
}
div#message {
    height:27px;
  position: relative;
}
span.link {
    cursor: pointer;
    font-size: 1.25em;
    padding-right: 20px;
}
span.link.active {
    text-decoration: underline;
}
div#tooltip {
  position: absolute;
  right: 12px;
  bottom: 0;
  height: 12px;
  color: white;
  background-color: #354052;
  padding-bottom: 8px;
}




  My test page




Search
Filters
Getting started
Tips
Key

 

 


Here is a link to stackoverflow

user_15545116 · Answer

To achieve this, you need to use z-index with position:relative properties, to get up your link. Because the tooltip has the highest priority with position:absolute.

.stack-link {
  position: relative;
  z-index: 10;
}
.stack-link:hover {
  border-bottom: 2px solid brown;
}

d3.selectAll('span').on('mouseover', function(e) {
  d3.select('#tooltip').text('Hello folks');
});

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: #354052;
}

header {
  width: 100%;
  height: 54px;
  background: #14b2c7;
  color: #ffffff;
  vertical-align: middle;
  overflow: hidden;
  font-size: 2em;
  font-weight: bold;
  white-space: nowrap;
}

#body {
  width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  padding: 10px;
}

.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

div#menu2 {
  color: #14b2c7;
  height: 27px;
  overflow: hidden;
}

div#message {
  height: 27px;
  position: relative;
}

span.link {
  cursor: pointer;
  font-size: 1.25em;
  padding-right: 20px;
}

span.link.active {
  text-decoration: underline;
}

div#tooltip {
  position: absolute;
  top: 0;
  right: 12px;
  /* height: 12px; */
  color: white;
  background-color: #354052;
  /* padding-bottom: 8px; */

  height: 100%;
  display: flex;
  align-items: center;
}


/* new class */

.stack-link {
  position: relative;
  z-index: 10;
}

.stack-link:hover {
  border-bottom: 2px solid brown;
}



  
   My test page


  
    
      Search
      Filters
      Getting started
      Tips
      Key
    
     
     
  
  Here is a link to
  stackoverflow

user_10867454 · Answer

There is a character (a non breaking space) between the div containing all the spans (the menu) and the div with id message.

If you replace that with a character that can be seen then you'll notice that it sits in the same place as the following text. It is in fact an overflow to a div which has height 27px (and width 100%) but overflow has not been hidden.

There are various ways of getting round this. e.g. make sure there are no spurious characters like that. This snippet just sets the overflow to hidden to get round the problem but you may like to look at the whole HTML structure. It might be natural for example to put the content in a div also and have clear separation of styling.

window.addEventListener('load', () => {
  d3.selectAll('span')
    .on("mouseover", function(e) {
      d3.select('#tooltip')
        .text("Hello folks")
    });
});

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: #354052;
}

header {
  width: 100%;
  height: 54px;
  background: #14b2c7;
  color: #ffffff;
  vertical-align: middle;
  overflow: hidden;
  font-size: 2em;
  font-weight: bold;
  white-space: nowrap;
}

#body {
  width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  padding: 10px;
}

.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

div#menu2 {
  color: #14b2c7;
  height: 27px;
  overflow: hidden;
}

div#message {
  height: 27px;
  position: relative;
  /* ADDED */
  overflow: hidden;
}

span.link {
  cursor: pointer;
  font-size: 1.25em;
  padding-right: 20px;
}

span.link.active {
  text-decoration: underline;
}

div#tooltip {
  position: absolute;
  right: 12px;
  bottom: 0;
  height: 12px;
  color: white;
  background-color: #354052;
  padding-bottom: 8px;
}



  
   My test page


  
    
      Search
      Filters
      Getting started
      Tips
      Key
    
     
    
       
    
  
  Here is a link to stackoverflow

How to have 2 variable size divs side by side, with one on the right

2 Answers