|
Posted by Bob on 03/08/06 17:45
up
Oliver Hauger wrote:
> Hello,
>
> for my web application I need the following basic layout:
> A header row which takes the complete screen width. Below that header row I need
> 3 columns
> next to each other. It should be possible to hide the right column so that the
> center column
> consumes the whole remaining width.
> As you can see in my example code I use a table where every table cell contains
> a division.
> My problem now is that if hide the division in the right column the column still
> have a width
> of about 50px. Does anyone have an idea how I can achieve that the right column
> consumes no
> space in horizontal direction if the inner division is hidden?
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">
> <html>
> <head>
> <title>Testframe</title>
> <style type="text/css">
> *{
> margin:0;
> padding:0;
> }
> </style>
> <script type="text/javascript">
> function toggleDisplayBlockElement(elementId)
> {
> var contextElement if (contextElement.style.display = "block") {
> contextElement.style.display } else {
> contextElement.style.display }
> }
> </script>
> </head>
> <body>
> <table style="width:100%;" border="1px">
> <tr>
> <td colspan="3">
> <div id="kopf" style="border:2px solid black;"
> onclick="toggleDisplayBlockElement('preview')">Kopf</div>
> </td>
> </tr>
> <tr>
> <td style="width:150px; vertical-align:top;">
> <div style="width:150px; height:1000px; border:2px solid blue;">Menü</div>
> </td>
> <td style="vertical-align:top;">
> <div style="height:500px; border:2px solid green;">Inhalt</div>
> </td>
> <td style="vertical-align:top;">
> <div id="preview" style="display:none; border:2px solid red;"></div>
> </td>
> </tr>
> </table>
> </body>
> </html>
>
> Thanx in advance!
> Oli
[Back to original message]
|