100% width = viewport width. How to make it as wide as is page body instead?


Tags: html,css,css3

Problem :

I have site which needs to display wide table. Above it is header which should be as wide as whole page (in this case, as wide as is table). However, it's only as wide as wide is viewport (screen size), so it looks alright when displayed, but as soon as user scrolls to sides he sees that header is not as wide as it should. How can I stretch this header to full page width without hardcoding values?

Simple example:

HTML:

<div></div>
<table>
    <tr>
      <td>V</td>
      <td>e</td>
      <td>r</td>
      <td>y</td>
      <td></td>
      <td>w</td>
      <td>i</td>
      <td>d</td>
      <td>e</td>
      <td></td>
      <td>t</td>
      <td>a</td>
      <td>b</td>
      <td>l</td>
      <td>e</td>
   </tr>
</table>

CSS:

div {background-color: red;height:20px;width:100%;}
td {width: 100px;min-width:100px;}

Jsfiddle: http://jsfiddle.net/JXG5c/3/



Solution :

The fix is actually quite simple; wrap the table and the header in a inline-block div. This way, the wrapping div takes as much space as necessary, not just the space of the viewport. Then, you can use the 100% width for the child div, which is your header. So, your new markup should look something like this:

<div id="parent">
    <div id="child"></div>
    <table>
        <tr><td>V</td><td>e</td><td>r</td><td>y</td><td></td><td>l</td><td>o</td> <td>n</td <td>g</td><td></td><td>t</td><td>a</td><td>b</td><td>l</td><td>e</td></tr>
    </table>
</div>

And your new CSS should look like this:

td {width: 100px;min-width:100px;}
#parent {display:inline-block;}
#child {background-color: red;height:20px;width:100%;}

So really all that needs to be done is that the parent must wrap the header and the table, and you need to set it to inline-block, and Voila, you have a full sized header. Also, note that the header will not be "fixed", it will scroll with the page, which if I interpreted your question correctly, is what you want to happen.

Here's a fiddle for you: http://jsfiddle.net/JXG5c/24/

UPDATE: Why does this work with inline-block but not block?

Block automatically takes up all the space of the parent. The parent for your header is the viewport/body, which is automatically 100% of the screen size.

Using inline-block, however, causes the div to take as much space as necessary. Think of it like a <span> element; it takes up as much space as necessary, no more, no less. However, divs don't work well with inline, so the people at the W3C made inline-block, which confers inline behavior to any block element. By using inline-block, the parent div automatically fits to the size of the children, which are your table and header. Thus, the parent of the header is the same size as the table, and by setting the header to 100% the width of the parent, the issue is solved. :)


    CSS Howto..

    How do I vertically center align a position:relative element

    How to remove CSS and JS from a certain content-type in Drupal 7

    If the tabs use all images to show text + icon on each tab, then how to add text to to help search engine to find the keywords on the tabs?

    How to vertically align image in a td cell, without vertically-align

    How to align text within a div

    How can I render country flags as a ribbon, using CSS only?

    How to position the GWT dialog to the bottom right corner of the browser?

    How to set Bootstrap's hero unit height to 100%?

    How to Move Bing Maps Menu to the Right side of Screen

    How to load CSS in Django templates?

    How to get odd/even coloring for IE and Firefox using CSS alone?

    How to isolate PrimeFaces Widget from being affected by main site CSS

    Trying to highlight table row using JQuery but not working, can anyone tell me why and how to fix it?

    How to change menu from on hover to on click

    How do I align my radio button with associated text?

    How can i integrate php to html table

    How to set a css class to table header cell

    How to load css into html dynamically?

    How to get a background image to print using css?

    How to create a scrollable element within a floated element?

    How can I replicate something similar to querySelector in browsers like IE 7 and 6?

    How to set line spacing of an ordered list consistently across browsers?

    How to set CSS attributes relative to a parent node?

    How to set hover of the block which contains icon with HTML or CSS?

    CSS- How'd they do that without Absolute Positioning and Z-index?

    how to avoid css jitters while applying css border with hover pseudo class

    CSS how to height step arrow

    How to center my navigation using .css

    How to set my Django form on the center of the page

    How to remove default CSS from TextField in flex?