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
Post a Comment