html - Horizontal scrollbar appearing on display: table element -



html - Horizontal scrollbar appearing on display: table element -

i have simple page layout this:

css:

html, body { height: 100%; margin: 0; padding: 0; } .table-wrapper { display: table; width: 1366px; height: 100%; } .cell-left { display: table-cell; width: 240px; } .cell-right { display: table-cell; width: 1126px; }

html:

<div class="table-wrapper"> <div class="cell-left"></div> <div class="cell-right"> /* long content */ </div> </div>

when content in .cell-right becomes long plenty browser display vertical scrollbar adds horizontal scrollbar ruins layout. problem goes away if set 100% width on .table-wrapper shrinks both cells not want. must have fixed widths on 3 elements proper tweaks responsive design project requires. both cells need span across document height.

funny thing net explorer 11 not have problem both firefox , chrome do. can prevent horizontal scrollbar appearing?

edit

i forgot add together i'm testing on screen resolution of 1366x768. if wanna test on own screen resolution alter numbers.

here's fiddle:

http://fiddle.jshell.net/zddm6asz/1/show/

here 1 1920x1200:

http://fiddle.jshell.net/zddm6asz/2/show/

edit: see first comment under answer, before trying out this.

if add

overflow-x: hidden;

for .cell-left , .cell-right, should prevent cells getting horizontal scrollbar.

html css

Comments

Popular posts from this blog

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* -

mediawiki - How do I insert tables inside infoboxes on Wikia pages? -

Local Service User Logged into Windows -