Div is not 100% inside the frame

Question

I have two objects inside the frame (Table and Div). Below of the table there is a gray bar. Please guide me why gray bar width is not coming 100% to end of the page. If you scroll the frame to the right, you will notice the gray bar is half of the table. How can I make it exactly the same width as table? Note: I cannot use pixel. Table and Div both should be in in percentage.

Fiddle : http://jsfiddle.net/awaises/78Zfa/

CSS:

.frame{
    overflow-x: scroll;
    width:100%;
    }
.gray-bar{
     background:#cdcdcd;
     padding:6px 0;
     width:100%;
     height: 20px;
     }

HTML:

 <div class="frame">
     <table border="1" width="100%">
         <tr>
             <td>Nam luctus</td>
             <td>Nam luctus sem sit amet</td>
             <td>Nam luctus sem sit amet fermentum tincidunt</td>
             <td>Nam luctus</td>
             <td>Nam luctus sem sit amet</td>
             <td>Nam luctus sem sit amet fermentum tincidunt</td>
             <td>Nam luctus</td>
             <td>Nam luctus sem sit amet</td>
             <td>Nam luctus sem sit amet fermentum tincidunt</td>
             <td>Nam luctus</td>
             <td>Nam luctus sem sit amet</td>
             <td>Nam luctus sem sit amet fermentum tincidunt</td>
             <td>Nam luctus</td>
             <td>Nam luctus sem sit amet</td>
             <td>Nam luctus sem sit amet fermentum tincidunt</td>
             <td>Nam luctus</td>
             <td>Nam luctus sem sit amet</td>
             <td>Nam luctus sem sit amet fermentum tincidunt</td>
             <td>Nam luctus</td>
             <td>Nam luctus sem sit amet</td>
             <td>Nam luctus sem sit amet fermentum tincidunt</td>
             <td>Nam luctus</td>
             <td>Nam luctus sem sit amet</td>
             <td>Nam luctus sem sit amet fermentum tincidunt</td>
         </tr>
</table>
 <div class="gray-bar">Edit | Delete</div>

If you move the gray-bar outside of the frame it would stay in place while the table scrolls. It's not really an answer for your question but a possible solution. — pstenstrm, Dec 21 '13 at 21:53

score 0 · Answer 1 · edited May 23 '17 at 12:03

Actually, it is 100% width of the div classed frame.

div.frame is 100% width of the viewport, ignoring the table width witch grows out of the viewport.

A basic solution would be to make your div.frame display not like a block but like a table-cell or an inlined block. But the overflow-x won't apply anymore

See jsFiddle

.frame{
    overflow-x: scroll;
    border:1px solid red;
    display:table-cell;
}

So, to keep the horizontal scrollbar, redesign your html in a way to encapsulate div.frame in an outter div with overflow-x:scroll.

You can also try applying a 'clearfix' fix, but i am not 100% sure. See What is a clearfix? and http://code-tricks.com/css-clearfix-methods/ for a basic reference if you want to give it a try.

Otherwise, just add a row at the bottom of your table to contain your "Edit | Delete" functionnality (i heard someone grinding a nail about data-table seo ?).

Exactly, this is what I have noticed. So do we have any solution for that? — Awais Imran, Dec 21 '13 at 22:00

score 0 · Answer 2 · answered Dec 21 '13 at 22:05

0

width: 100% is only stretching the div to 100% of the viewport. If you want it to be the width of the table, add a second row at the bottom:

<tr>
    <td colspan="24" class="gray-bar">
        Edit | Delete
    </td>
</tr>

See jsFiddle

answered Dec 21 '13 at 22:05

symlink

11,984
7
29
50

score 0 · Answer 3 · edited May 23 '17 at 10:25

0

The reason to why the gray-bar is short is because the frame is not expanding with the table. While the gray-bar is expanding with the frame.

I found an answer to the question here.

Remove the width values and add display: inline-block; to the .frame.

Try this:

.frame{
    overflow-x: scroll;
    display: inline-block;
}

.gray-bar{
    background:#cdcdcd;
    padding:6px 0;
    height: 20px;
}

edited May 23 '17 at 10:25

Community

1
1

answered Dec 21 '13 at 22:07

pstenstrm

6,339
5
41
62

1

It actually is the same issue, the reason to why the gray-bar is short is because the frame is not expanding with the table. – pstenstrm Dec 21 '13 at 22:18

score 0 · Answer 4 · answered Dec 21 '13 at 22:22

0

You need just one more parent for inner elements .
A parent with flexible size can resolve this .(display:inline-block;)
http://jsfiddle.net/78Zfa/12/

answered Dec 21 '13 at 22:22

M Rostami

4,035
1
35
39

Héctor William · Answer 5 · 2013-12-21T22:47:16.373

0

Well your div spans 100% it will fit only on the screen size , an alternate choise is use javascript to change the size dinamically...

I dont know if you'd like to do it this way

document.getElementsByClassName("gray-bar")[0].style.width=
document.getElementsByClassName("frame")[0].
getElementsByTagName("table")[0].clientWidth;

edited Dec 21 '13 at 22:47

answered Dec 21 '13 at 22:26

Héctor William

756
6
24

Div is not 100% inside the frame

5 Answers5