CODEWITHSUNDEEP
htmlcsscss-tables
GvS
GvS

Reputation: 52518

Redesign Table (dynamic width) with Div tags

I want to display a html page, with a classic design. Header, footer, content and bar to the right.

For some reason I don't like the fixed width of the content. On a wide screen you should be able to resize your page, so it fills the screen, or make it very small to display two pages side by side.

I also would like to use div tags instead of a table layout. Using the div tags gives me the following advantages (I'm being told):

My test/debug html looks like this:

<!-- Create content with DIV tags -->
<div id="head" style="background-color:aqua">This is the header</div>
<div id="body" style="float:left;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales sagittis sem, at bibendum nunc aliquet non. Maecenas condimentum, libero pharetra suscipit sodales, dui diam laoreet velit, at lacinia nisl erat sed turpis. Quisque lobortis consequat elementum. Suspendisse non interdum est. In velit felis, rhoncus tincidunt tincidunt sit amet, laoreet eu ligula. Nulla facilisi. Sed ornare facilisis pulvinar. Integer viverra arcu eu turpis dictum vitae tincidunt magna scelerisque. Nunc laoreet pulvinar odio, quis rutrum libero consectetur non. Donec molestie, felis volutpat condimentum iaculis, orci arcu feugiat sapien, accumsan scelerisque sapien orci sed urna. Curabitur et turpis sit amet diam vulputate egestas. </p>
</div>
<div id="right" style="background-color:orange; float:right; width:10em;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="tail" style="background-color:lime;clear:both;">This is the Footer</div>

<p>&nbsp;</p>

<!-- Create content with TABLE tag -->
<div id="t-head" style="background-color:aqua">This is the header</div>
<table cellpadding="0" cellspacing="0">
    <tr><td>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales sagittis sem, at bibendum nunc aliquet non. Maecenas condimentum, libero pharetra suscipit sodales, dui diam laoreet velit, at lacinia nisl erat sed turpis. Quisque lobortis consequat elementum. Suspendisse non interdum est. In velit felis, rhoncus tincidunt tincidunt sit amet, laoreet eu ligula. Nulla facilisi. Sed ornare facilisis pulvinar. Integer viverra arcu eu turpis dictum vitae tincidunt magna scelerisque. Nunc laoreet pulvinar odio, quis rutrum libero consectetur non. Donec molestie, felis volutpat condimentum iaculis, orci arcu feugiat sapien, accumsan scelerisque sapien orci sed urna. Curabitur et turpis sit amet diam vulputate egestas. </p>
    </td><td valign="top" style="background-color:orange; width:10em;">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </td></tr>
</table>
<div id="t-tail" style="background-color:lime;clear:both;">This is the Footer</div>

Output of this code is here:

Div vs Tables
(source: vantslot.be)

(Text does not matter, only the layout, so I have shrunken it a bit).

The top layout is using the divs : wrong

Bottom layout is using the table : good

My question / problem

How can I position the "right" bar, on the right of the content, while maintaining the dynamic width of the content, and not using table layout?

What I actually want is the right pane appear on the right of the content, but when the browser is too small (< 20em), it can be displayed under it. This is not possible with tables, so I prefer a div solution.

In the final Website the contents of the header / footer / content and right will be dynamically generated, so I cannot hardcode the height.

Edit

Thx for all the answers, this really helps me forward.

I see what is "wrong" here. I have put the right pane after the content pane. If I put the right pane before the content pane, it renders correctly (after adding a margin-right to the content).

This is a bit illogical for flow of the html. Since the content is more important as the content in the right pane, I would like it to be send to the client before the right pane.

Upvotes: 2

Views: 8008

Answers (5)

Anonymous
Anonymous

Reputation: 50349

Try the following CSS snippet:

display: table;

Upvotes: 0

GvS
GvS

Reputation: 52518

Not tested (yet), but I think I have found the solution to the problem.

http://www.alistapart.com/articles/holygrail/

This solutions allows to mix fixed and liquid layout (terms I learned from asking this question).

Upvotes: 0

Roman
Roman

Reputation: 66166

Try this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Пример</title>
    <style type="text/css">
      html,body{
        margin:0;
        padding:0;
      }

      #header{
        height:150px;
        min-width:600px;
        background:#FFEF97
        }

      #menu{
        width:250px;
        float:right;
        background:#FFC597
        }


      #info{
        min-width:350px;
        background: red;
        }

      #footer{
        height:20px;
        min-width:600px;
        background:#B9CC8A;
        clear:both
      }

      #body{
        width: expression(((document.documentElement.clientWidth
        || document.body.clientWidth) < 600)?
        "600px" : "100%")
        }
    </style>
    </head>
    <body>
    <div id="body">
    <div id="header">HEADER</div>
    <div id="menu">MENU (side bar)</div>
    <div id="info">INFO (central pane)</div>

    <div id="footer">FOOTER</div>
    </div>
    </body>
    </html>

Upvotes: 0

Zack Marrapese
Zack Marrapese

Reputation: 12090

This will allow your right, fixed-width column to fit in the margin of your other column, and therefore be on the same line:

#right
{
    float:right; 
    width:18em;
}

#body
{
    margin-right: 20em; //IE calculates padding into the width, so you need a buffer unless you set body's padding to 0
}

Now the body's div, which defaults to 100% screen width, will be fluid, and your right column will be fixed width.

Upvotes: 2

Bjorn
Bjorn

Reputation: 71860

Add a clear:both to your right column. To manage the height of having a float at the bottom of your main content area use a clearfix. Also, since you want the right column to float underneath the left column, there's no need to float the left column?

Upvotes: 1

Related Questions