ansaurus

Question

two column CSS layout problem -- in IE6, table in content area is being pushed down by left nav

Answer 1

A:

You could just make the content float left too:

 #content
 {
     float:left;
     ...
 }

don't forget to adjust the margin-left though

Other solution that doesn't quite work for other browsers though:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
        <head>
                <style type="text/css" media="screen">

                        #nav
                        {
                                float: left;
                                width: 180px;
                                background-color: #999;
                        }

                        #content
                        {
                                float: right;
                        }

                </style>
        </head>
        <body>
            <div id="container">
                <div id="nav">
                        <div>left content</div>
                </div>
                <div id="content">
                        <table style="width: 100%; background-color: #666666">
                        <tr><td>table</td>
                        </tr>
                        </table>
                </div>
            </div>
        </body>
</html>

Notice the container and the float:right;

GoodEnough 2009-02-18 20:04:12

The table needs to expand to fill all the available space. Floating elements seems to mess this up.

morgancodes 2009-02-18 20:06:59

Any reason why you're using the loose DOCTYPE?

GoodEnough 2009-02-18 20:12:07

Only because I'm afraid of using anything stricter.

morgancodes 2009-02-18 20:17:52

morgan, you shouldn't be afraid. I use XHTML 1.0 Strict exclusively, and I'm very happy. You will be too if you do the same ;)

Jonathan Sampson 2009-02-18 20:18:43

So how about that second solution I added?

GoodEnough 2009-02-18 20:18:54

@Crossbrowser, "doesn't quite work for other browsers" won't cut it, I'm afraid.

morgancodes 2009-02-18 20:21:07

Answer 2

+3 A:

Give your table a width of 99% instead.

Jonathan Sampson 2009-02-18 20:26:57

AAARRRRRRGGHGGGGGHGHH!!!!! So stupid, but seems to work. Is there any sort of rule I can use to remember this? Any explanation for why this works?

morgancodes 2009-02-18 20:31:17

Rhetorical question, right? IE6 cannot be understood ;)

Jonathan Sampson 2009-02-18 20:32:42

Answer 3

A:

If all else fails, go with a table layout *ducks and covers* from the CSS purists:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
        <head>
                <style type="text/css" media="screen">

                        #nav
                        {
                            width: 180px;
                            background-color: #999;
                        }

                        #content
                        {
                            background-color: #999;
                        }

                </style>
        </head>
        <body>
            <table style="width:100%;">
                <tr>
                    <td id="nav">
                        <div>left content</div></td>

                    <td id="content">
                        <table style="width: 100%; background-color: #666666">
                        <tr><td>table</td>
                        </tr>
                        </table></td>
                </tr>
            </table>
        </body>
</html>

GoodEnough 2009-02-18 20:29:33

Answer 4

+1 A:

Another solution is to make the table float left and have a width of 100%....

masterik 2009-02-18 20:45:01

True. Just be sure to apply the clear-fix if nothing follows the table.

Jonathan Sampson 2009-02-18 20:57:46

ansaurus

tags:

views:

answers:

two column CSS layout problem -- in IE6, table in content area is being pushed down by left nav

related questions