CODEWITHSUNDEEP
htmlcsshtml-table
jk jk
jk jk

Reputation: 1075

Migrate table layout to div layout issue

Current my layout uses table, but in Opera and IE, all td height 100% do not work.

In Firefox/Chrome works like the picture below:

html structure

<table>
    <tr>
        <td>
            <table>
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td style="height:32px;"></td>
                </tr>
            </table>
        </td>
        <td style="width:64px"></td>
    </tr>
<table>

So how can I turns this to div?

I Googled tried setting first div position absolute and height 32px, then put it bottom 0, second div set it height 100% position absolute and top:0 bottom:32px, but not works like the picture at all.

Can anyone can teach me how to migrate the layout from table?

UPDATE

My php script in some page will dynamic add a top bar.

current layout:

<div id="leftside">
    <div id="topbar"></div>

    <div id="php-generated-content">
      <div id="autofill"></div>
      <div id="bottombar"></div>
    </div>
</div>
<div id="rightside">
    <div id="right-menu"></div>
</div>

Just same as the picture, but in top add one more height:32px top bar then green part auto fill between top and bottom bar.

Upvotes: 1

Views: 211

Answers (2)

Artfunkel
Artfunkel

Reputation: 1852

It depends on what sort of scrolling behaviour you want. To have permanently on-screen panels and a scrolling main panel is simple enough:

<html>
<head>
<style type="text/css">
body { padding:0 64px 32px 0; }
.right-col { background:red; width:64px; height:100%; position:fixed; right:0; top:0 }
.footer { background:green; height:32px; position:fixed; left:0; right:64px; bottom:0 }
</style>
</head>
<body>
[content]
<div class="right-col"></div>
<div class="footer"></div>
</body>
</head>

If you want the footer to move based on the height of the main area (without going above the bottom of the screen) it's much harder. The only good solutions I've seen involve JavaScript.

Upvotes: 0

Roy Sonasish
Roy Sonasish

Reputation: 4599

Try this

css

body, html{
    height:100%;    
}
.leftPan{
    width:80%;
    background-color:#066;
    height:100%;
    float:left;
    position:relative;
}
.rightPan{
    height:100%;
    width:20%;
    background-color:#09F;
    float:right;
}
.footer{
    position:absolute;
    height:32px;
    bottom:0;
    left:0;
    width:100%;
    background-color:#963;
}

html

<div class="leftPan">
    Left Panel
    <div class="footer">Footer</div>
</div>
<div class="rightPan">
    Rigt Panel
</div>

jsFiddle File

Upvotes: 2

Related Questions