CODEWITHSUNDEEP
htmlcss
innerfred
innerfred

Reputation: 13

How to get div text-content to wrap without displacing the div and also get the div extend to the right?

JSBin

Screenshot

I have a list with div-nodes. Each node have 2 rows(divs). Each row have 3 inline divs (spacers and content).

The problem is that when the text of a content-div is long the div is displaced to the "next" row. I need the div to stay in place and the text to wrap but not visually overwrite any other notes below.

Also the conent divs needs to extend fully the right, fill out the space.

Any help appreciated!

.tree{
  font-family: sans-serif;
  font-size: 14px;
}

.node{
}

.row1{
}

.row2{
}

.node-icon{
  display: inline-block;
  border: 1px solid grey;
  width: 1em;
  text-align: center;
  vertical-align: top;
  
}

.spacer{
  display: inline-block;
  border: 1px solid grey;
  width: 1em;
  vertical-align: top;
 
}

.node-title{
  display: inline-block;
  border: 1px solid grey;
  vertical-align: top;
}

.node-notes{
  display: inline-block;
  border: 1px solid grey;
  font-size: 0.8em;
  vertical-align: top;
}
  <div class="tree">
    
    
    <div id="node1" class="node">
      <div class="row1">
        <div class="node-icon">•</div>
        <div class="spacer">&nbsp;</div>
        <div class="node-title">Node 1 - problem 1</div>
      </div>
      <div class="row2">
        <div class="spacer">&nbsp;</div>
        <div class="spacer">&nbsp;</div>
        <div class="node-notes">Node 1 notes. How can I get the div to fill out to the right?</div>
      </div>  
    </div>  <!--// node 1 end -->

    <hr>
    
    <div id="node2" class="node">
      <div class="row1">
        <div class="node-icon">•</div>
        <div class="spacer">&nbsp;</div>
        <div class="node-title">Node 2 - problem 2</div>
      </div>
      <div class="row2">
        <div class="spacer">&nbsp;</div>
        <div class="spacer">&nbsp;</div>
        <div class="node-notes">Node 2 notes. Why does the div, that node 2 notes reside in, break down to another 'row' when the text is long? How can I achieve that the div stays where it is and that only the text and not the div wraps down to another row?</div>
      </div>  
    </div>  <!--// node2 end -->

  
  </div> <!--// tree end -->

Upvotes: 1

Views: 43

Answers (1)

Ishita Ray
Ishita Ray

Reputation: 666

You can use "calc" in Width like I have used. The calc() function performs a calculation to be used as the property value.

 width: calc(100% - 42px);


.tree{
  font-family: sans-serif;
  font-size: 14px;
}

.node{
}

.row1{
}

.row2{
}

.node-icon{
  display: inline-block;
  border: 1px solid grey;
  width: 1em;
  text-align: center;
  vertical-align: top;
  
}

.spacer{
  display: inline-block;
  border: 1px solid grey;
  width: 1em;
  vertical-align: top;
 
}

.node-title{
  display: inline-block;
  border: 1px solid grey;
  vertical-align: top;
}

.node-notes{
  display: inline-block;
  border: 1px solid grey;
  font-size: 0.8em;
  vertical-align: top;
  width: calc(100% - 42px);
}
<div class="tree">
    
    
    <div id="node1" class="node">
      <div class="row1">
        <div class="node-icon">•</div>
        <div class="spacer">&nbsp;</div>
        <div class="node-title">Node 1 - problem 1</div>
      </div>
      <div class="row2">
        <div class="spacer">&nbsp;</div>
        <div class="spacer">&nbsp;</div>
        <div class="node-notes">Node 1 notes. How can I get the div to fill out to the right?</div>
      </div>  
    </div>  <!--// node 1 end -->

    <hr>
    
    <div id="node2" class="node">
      <div class="row1">
        <div class="node-icon">•</div>
        <div class="spacer">&nbsp;</div>
        <div class="node-title">Node 2 - problem 2</div>
      </div>
      <div class="row2">
        <div class="spacer">&nbsp;</div>
        <div class="spacer">&nbsp;</div>
        <div class="node-notes">Node 2 notes. Why does the div, that node 2 notes reside in, break down to another 'row' when the text is long? How can I achieve that the div stays where it is and that only the text and not the div wraps down to another row?</div>
      </div>  
    </div>  <!--// node2 end -->

  
  </div> <!--// tree end -->

Upvotes: 1

Related Questions