CODEWITHSUNDEEP
htmlcss
AaronLS
AaronLS

Reputation: 38367

section is smaller than contents

The default layout page I get in a MVC razor has a problem with the section tag being smaller than its contents. The issue is I have a large table inside of it, and it is running out of the section, rather than the section simply becoming wide enough to fit it. I have recreated the issue in jsFiddle. You can see that the blue box is much thinner than the red box. The blue section being the initial size of the window, but if you scroll right, then you see the table is wider than the section.

How do I get the section to widen to match the size of its contents?

<div class="page">        
    <section id="main" style="background:blue;height:50px">
       <table style="width:1000px; overflow:auto;background:red">
           <tr><td>lkjlkjlkjlkjjhgjhgjhgjgjhgjhg</td></tr>

        </table>
    </section>
    <footer>
    </footer>
</div>

http://jsfiddle.net/sDG8n/1/

Upvotes: 0

Views: 944

Answers (3)

Trav McKinney
Trav McKinney

Reputation: 998

Float the section to the left

<section id="main" style="float:left;background:blue;height:50px">

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

The Spec says you're doing it wrong:

The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead

In other words: Use a DIV.

Upvotes: 0

Travesty3
Travesty3

Reputation: 14469

Try putting the overflow:auto on the section instead of on the table.

Upvotes: 0

Related Questions