Container div width problem

Question

Can anybody tell me why the outer div is not expanding to the page width? Is there any solution for this without removing the doctype declaration(If I remove doctype, it is expanding) ? Also my page is in js disabled mode.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
    </head>
    <body>
    <div style="border:1px solid #ff0000;">

        <div>
            <table class="storeList">
                <thead>
                    <tr>
                        <th>
                            Country Code
                        </th>
                        <th>
                            Store ID
                        </th>
                        <th>
                            Store Name
                        </th>
                        <th>
                            TownName
                        </th>
                        <th class="actions">
                            Store Operation
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            TEST
                        </td>
                        <td>
                            TEST
                        </td>
                        <td>
                            hghjgdkjvhkjhvhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhjjjjjjjjjjjjjjjjjjjjhghjgdkjvhkjhvhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhjjjjjjjjjjjjjjjjjjjjdhgfdhf
                        </td>
                        <td>
                            TEST
                        </td>
                        <td class="actions">
                            TEST ACTIONS
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>
</body>
</html>

score 2 · Accepted Answer · edited May 23 '17 at 12:32

2

This answer works, promise!

To your outermost div (<div style="border:1px solid #ff0000;">), add either:

float: left, or;
display: inline-block.

If you would like to see demos of these two fixes, check these older answers I provided:

edited May 23 '17 at 12:32

Community

1
1

answered May 06 '11 at 10:33

thirtydot

224,678
48
389
349

Hi, Can you check the below url? Here why the ul is not expanding upto the width of the container ? http://jsfiddle.net/aneesh/LNS26/21/ – Aneesh May 17 '11 at 12:05
Stick a `clear: both` on the element after the element with `float: left`: http://jsfiddle.net/thirtydot/LNS26/24/ - if you want the red background on the `ul` to extend to the width of the table, move the `ul` inside the containing `div`. – thirtydot May 17 '11 at 14:24

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

It would probably be because browsers apply their own default style, which include margins and padding on various elements. The body tag probably has default padding so you'd need to add a "reset CSS" file to your page to reset these defaults or just try:

<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
</style>

In the head of your page. Also, just to note, it looks like you're using tables for layout. This is a big no no in todays modern world of CSS:

http://www.hotdesign.com/seybold/

http://www.mardiros.net/css-layout.html

Why not use tables for layout in HTML?

edited May 23 '17 at 12:14

Community

1
1

answered May 05 '11 at 12:55

Alex

7,320
1
18
31

No need to remove the margin/padding of every single element for this, just the body tag is enough, or maybe the html tag as well. – Olivier 'Ölbaum' Scherler May 05 '11 at 13:08
1

Also, it looks like he’s using a table to… lay out data as a table (a list of stores with several columns). Nothing wrong with that. In fact, it has been a big yes-yes since the beginning of times. – Olivier 'Ölbaum' Scherler May 05 '11 at 13:11
1

It is not working with the reset css. I can't omit the table since it is a tabular data :( Could you please copy and paste the code given and let me know whether it is working ? – Aneesh May 05 '11 at 13:49
@Olbaum - I added the Universal Selector example as you don't generally run into the problem just once when building a web page. And in response to the second question, you're right... but then I see redundant elements instead, almost the same thing ;-) – Alex May 05 '11 at 14:59

score 0 · Answer 3 · answered May 05 '11 at 15:40

0

You can also set your table to 100% width to cover the area provided by the div

table { width: 100%; }

answered May 05 '11 at 15:40

mauteri

531
3
7

Container div width problem

3 Answers3