Tom Kullm: Dreispaltiges Layout

Beitrag lesen

Hi,

ich verwende ein dreispaltiges Layout (die ganze Browser Höhe einnehmend) mittels CSS. Die mittlere Spalte enthält den eigentlichen Content.

Nun möchte ich erzwingen, das der Browser (wenn ich das Browserfenster verkleinere) erst dann die horizontale Scrollbar anzeigt, wenn das Fenster kleiner wird als der Content. Die Scrollbars sind jedoch im Moment schon sichtbar, wenn ich kleiner werde als die rechte spalte.

Hat jemand ne Idee?

Gruss Tom

Meines Wissens sollte das funktionieren wenn du der mittleren Spalte einen festen Wert gibst, z.B.

width = "500px";

und bei den anderen beiden Spalten jeweils eine Breite von

width = "*";

angibst.

MfG,

McKentire

Hi,

vielen Dank für die prompte Antwort, ich habe mal das Beispiel angehängt:

@charset "utf-8";

.border_left {
 position:absolute;
 top:0px;
 left:50%;
 height: 100%;
 width:20px;
 margin-left:-439px;
 background-color: #717171;
        background-image: url(images/backborder_left.gif);
}
.zentriert {
 position:absolute;
 top:0px;
 left:50%;
 height: 100%;
 width:838px;
 margin-left:-419px;
 background-color: #FCF6DD;
 overflow: hidden;
}

.border_right {
 position:absolute;
 top:0px;
 left:50%;
 height: 100%;
 width:20px;
 margin-left:419px;
 background-color: #717171;
        background-image: url(images/backborder_right.gif);
}

.pagebanner {
 position: absolute;
 left: 10px;
 top: 0px;
}

Das HTML dazu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>ThermSystec</title>
<style type="text/css">
<!--
html, body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 height: 100%;
}
body {
 background-color: #717171;
}
-->
</style>
<link href="thermsystec.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="border_left"></div>
<div class="zentriert">

<div class="pagebanner"><img src="images/banner.jpg" width="817" height="297" /></div>

</div>
</div>
<div class="border_right"></div>
</body>
</html>

Ich möchte also nur erreichen, das die Scrollbar im Browser erst dann erscheint, wenn die Breite des Browser kleiner als die des div Elements (div class="zentriert") wird.