2

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):

  • Content can be rendered while waiting for the "right" bar
  • On a mobile phone, the Div tags can be shown under each other, instead of side by side.

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.

5 Answers 5

2

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.

1

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?

2
  • 1
    Thx for the answer apphacker, but normally I would like to display the right pane on the right of the content. (only on small screens I would like the alternate layout) The clear:both does not enable that.
    – GvS
    May 5, 2009 at 14:22
  • The only way to do that is to use JavaScript.
    – Bjorn
    May 6, 2009 at 2:43
0

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>
5
  • wouldn't #body { min-width: 600px; } work instead of mixing javascript with your CSS? May 5, 2009 at 19:31
  • No, expressions are nessecary to fix ie6 problem (ie6 doesn't support min-width and max-width)
    – Roman
    May 5, 2009 at 21:15
  • web expressions are bad ok. The browser executes the javascript everytime you resize the browser, change anything at all, look at it wrong. And they don't work in IE 8. And what are you doing setting the width of the body element? Use a container.
    – Bjorn
    May 6, 2009 at 2:44
  • then give me another solution for IE6
    – Roman
    May 6, 2009 at 7:39
  • #container {min-width: 600px;} should work, then just wrap your elements in <div id="container"></div>
    – S Pangborn
    Oct 16, 2009 at 15:19
0

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).

0

Try the following CSS snippet:

display: table;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.