CSS，显示：表和溢出在子div上无法正常工作

Question

Basicly I have a webpage where users can change content inside my layout. I'm trying to force the div where the content is being put to overflow hidden or scroll.

But the width of my page keeps increasing rather then scrolling/hiding.

http://jsfiddle.net/weLn0g96/3/

Anyone more clever than me that can figure this out? Prolly missing something like position:absolute; or overflow should be somewhere else etc.

Answer 1

Update #container to be display:block; and overflow: scroll; . Using display:table; will make the #container element width as wide as it needs to be to hold the data and will not adhere to the 100% width of the parent element that you have declared and are trying to accomplish.

#container {
  /* Change display: table; to */ display: block;
  width: 100%;
  height: 100%;
  text-align:center;
  overflow: scroll; /* add this */
}

You should also add height:100%; to your html and body elements if you want the #container element to truly be 100% of the height of the body.

See Snippet with border added to #container for demonstration purposes.

 html, body { margin: 0; padding: 0; background-color: #111111; } #container { /* Change display: table; to */ display: block; width: 100%; height: 100%; text-align: center; overflow: scroll; /* add this */ } #container { /* styles just for demonstration */ border: 5px solid green; box-sizing: border-box; } #row-empty { display: table-row; width: 100%; height: 100%; } #sides { display: table-cell; } #main { display: table-cell; width: 800px; margin: 0px; padding: 0px; } #main-table { display: table; width: 100%; height: 100%; background-color: #CCCCCC; } #menu { display: table-row; } #menu-col { display: table-cell; width: 100%; height: 100px; border-bottom: 1px solid #000000; } #page { display: table-row; width: 100%; height: 100%; } #page-col { display: table-cell; position: relative; background-color: yellow; overflow-x: hidden; } 

 <div id="container"> <div id="row-empty"> <div id="sides">&nbsp;</div> <!-- Left Column --> <div id="main"> <!-- Middle Column --> <div id="main-table"> <!-- New table inside table-cell for rows inside this cell --> <div id="menu"> <!-- Top Row --> <div id="menu-col"> menu </div> </div> <div id="page"> <div id="page-col"> <!-- Middle Row --> testar [asdf] asdasd <div news style="display:inline-block;width:500px;overflow-x:auto;background-color:red;width:1500px;">Inga nyheter än.</div> xx </div> </div> </div> </div> <!-- Middle Column (main) end --> <div id="sides">&nbsp;</div> <!-- Right Column --> </div> <!-- row end --> </div> <!-- container end -->