O
Oliver Hauger
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 = document.getElementById(elementId);
if (contextElement.style.display == "block") {
contextElement.style.display = "none";
} else {
contextElement.style.display = "block";
}
}
</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
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 = document.getElementById(elementId);
if (contextElement.style.display == "block") {
contextElement.style.display = "none";
} else {
contextElement.style.display = "block";
}
}
</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