CODEWITHSUNDEEP
htmlcss
Val Schuman
Val Schuman

Reputation: 1818

Have block level element fill 100% width of overflow-x: scroll container

I've got a container element that's a certain width, with overflow-x: auto. In it I have a block level header element (h1) that's supposed to, being a block element, fill the container horizontally. And it does so, as long as there are no other elements in the container that overflow, creating a horizontal scrollbar. If there are overflowing elements, then the header element fills only the non-overflowing horizontal space of the container, but doesn't appear in the overflowing space.

Fiddle demonstrating the problem: http://jsfiddle.net/rand0mbits/qUh3s/

HTML:

<div id="one">
    <h1>header</h1>
    <table><tr><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td>
    <td>text</td></tr></table>
</div>

CSS:

#one {
    width: 200px;
    overflow: auto;
    border: solid 1px;
}

#one h1 {
    font-size 1.1em;
    background-color: blue;
    display: inline-block;
    width: 100%;
    margin-top: 0;
}

table td {
    border: solid 1px;
    padding: 20px;
}

How do i make the <h1> fill the whole width of the container?

Upvotes: 10

Views: 4111

Answers (4)

Alex Char
Alex Char

Reputation: 33218

Try this:

css

#one {
    width: 200px;
    overflow: auto;
    border: solid 1px;
}

#one h1 {
    font-size 1.1em;
    background-color: blue;
    display: inline-block;
    width: 100%;
    margin-top: 0;
    position:relative;
}

table td {
    border: solid 1px;
    padding: 20px;
}

h1:after {
     content:"";
     background: blue;
     position: absolute;
     top: 0;
     bottom: 0;
     width: 100%;
    left:100%
 }

fiddle

Upvotes: 4

yetti
yetti

Reputation: 141

The H1 is going to inherit the width of its parent element since it's relative, so it will always end up being the same width you set #one to.

What you can do is instead of #one having overflow: auto, wrap the table inside another DIV with overflow: auto. This way, #one stays a fixed width, but the wrapper around the table, allows the content to scroll horizontally.

jsfiddle: http://jsfiddle.net/yetti/Ggua5/

Upvotes: 4

Fabian Mebus
Fabian Mebus

Reputation: 2415

See the fiddle.

Use the HTML caption element:

<div id="one">    

    <table>
        <caption>
            <h1>header</h1>
        </caption>
        <tr>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
        </tr>
    </table>

</div>

CSS:

#one {
    width: 200px;
    overflow: auto;
    border: solid 1px;    
}

#one h1 {
    font-size 1.1em;
    background-color: blue;        
    margin-top: 0;
    text-align: left;
}

table td {
    border: solid 1px;
    padding: 20px;
}

Upvotes: 8

Exploring
Exploring

Reputation: 573

Change this CSS code like the following then check and let me know if you want this:

#one {
width: 100%;
overflow: auto;
border: solid 1px;
}

Upvotes: 1

Related Questions