1

Im tried many times to do this, is very usefoul in many situations but seem not possible:

  1. Have 2 divs into same div container, in short 2 columns, div container width stay fixed.
  2. Every div appear like inline-block, so it adjust based to inner content, so if inner content is nothing, width is zero, if inner is 100px width will be 100px. This is the normal inline-block.
  3. The 2 divs must stay always in same row, no break line.
  4. If content of one or both two divs is overflow, it will be hidden and div stay always into the width of container.

Im able to make 1-2-3 but I stop on 4.

This is the code:

<div class="container">
       <div class="column">Lorem ipsum dolor sit amet</div>                           
       <div class="column">Lorem ipsum dolor sit amet</div>                       
</div>

CSS

.container{
  display: table;
  overflow: hidden;
}
.column {
  display: table-cell;
}

Demo

Similar thing can be done by inline-block but both 2 ways have same problem: width of div with inner content overflow not stay into container width but stay full content width

Is bit difficoult to explain, hope someone understand. This is a screenshot of my project, and my problem: http://expirebox.com/download/39f9acff53e75830b1714a653b11e0d0.html

Thank you

isherwood
  • 58,414
  • 16
  • 114
  • 157
Federico Schiocchet
  • 153
  • 2
  • 11
  • This is as close as I've come. I can't seem to force the table to 100% width. http://liveweave.com/axoIhN – isherwood Apr 01 '15 at 19:14

1 Answers1

2

There are 2 things to do here:

  1. Set table-layout to fixed:

    .container {
  width: 200px;
  display: table;
  table-layout: fixed;
  overflow: hidden;
}

  2. Set visibility to hidden in case of overflow:

    var element = document.querySelector('.column');
if( (element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)){
  // your element have overflow
  element.style.visibility = "hidden";
}
else{
  //your element don't have overflow
}

Referred from here, JS Bin.

Community
  • 1
  • 1
wolfram77
  • 2,841
  • 3
  • 23
  • 33