CODEWITHSUNDEEP
htmlcss
Vad
Vad

Reputation: 898

Cannot make DIV width 100% with scrollbar

I have a page with a DIV and a TABLE. The DIV is my header and I want it to be 100% width even when horizontal scroll-bar displayed. For some reason it takes only 100% of visible window.

My HTML code is:

<!DOCTYPE html>
<html lang="en">
<body>

    <div style="background-color:yellow;">100% DIV</div>

    <table style="width:100%; background-color:orange;">
        <thead>
            <tr>
                <th style="padding-left:20px; padding-right:20px;">Very_Long_Header_1</th>
                <th style="padding-left:20px; padding-right:20px;">Very_Long_Header_2</th>
                <th style="padding-left:20px; padding-right:20px;">Very_Long_Header_3</th>
            </tr>
        </thead>
    </table>

</body>
</html>

When I scroll to the right the DIV does not use all the width:

How can I make the DIV to take 100% of the page width? Ideally I do not want to change the TABLE because it's a generated code.

Upvotes: 12

Views: 11823

Answers (2)

bowheart
bowheart

Reputation: 4676

There is no way (perfectly dynamically--without fixing any widths--and with pure CSS--no JavaScript) to get a block-level element to inherit the width of a sibling block-level element via a block-level parent element.

The workaround is to put display: inline-block on the parent element, since an inline-block calculates its width property from its widest child.

In your case, don't put display: inline-block on the body element. I would suggest wrapping your 100% div and table elements in another wrapper element, thus:

<!DOCTYPE html>
<html lang="en">
<body>
  <div class="wrapper" style="display: inline-block; min-width: 100%;">
    <div style="background-color:yellow;">100% DIV</div>
    <table style="width:100%; background-color:orange;">
      <thead>
        <tr>
          <th style="padding-left:20px; padding-right:20px;">Very_Long_Header_1</th>
          <th style="padding-left:20px; padding-right:20px;">Very_Long_Header_2</th>
          <th style="padding-left:20px; padding-right:20px;">Very_Long_Header_3</th>
        </tr>
      </thead>
    </table>
  </div>
</body>
</html>

Also, putting min-width: 100% on the wrapper element will make it mimic an element with display: block on larger screen sizes.

Upvotes: 13

Ahmad Asjad
Ahmad Asjad

Reputation: 823

Actually table tag is being overflowed, so try to give 100% to its parent and to the div as well. If it's not working please provide me a jsfiddle url

Upvotes: 1

Related Questions