Linksbündiges Layout mit dynamischem Abstand

**Schlauchbeutelmaschine** · 28.09.2009, 10:50

Hallo,

ich möchte gerne ein linksbündiges Layout mit einem dynamischen Abstand nach links erstellen. Soll heissen das der Abstand nur dann vorkommen soll wenn die Mindestbreite vorhanden ist. Dadurch soll verhindern werden das bei Auflösungen um oder kleiner 1024px ein Scrollbalken entsteht.

Ich hoffe die Skizze kann das Ganze noch ein wenig verdeutlichen.

Wenn ihr wisst wie man das hinbekommt würde ich mich über ein Beispiel freuen.

Viele Grüße
Sabri

**Stephan** · 28.09.2009, 13:13

Hallo Sabri,

das geht eigentlich recht simpel. Zur Veranschaulichung einer kurzer Testcase:

HTML-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" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Testcase</title>
</head>
<body>
<div style="min-width:960px; max-width:1040px; height:100px; background-color:#f00">
<div style="width:960px; height:100px; background-color:#ccc; float:right;">container</div>
</div>
</body>
</html>

Ich sollte allerdings dazu sagen, dass die Eigenschaften min-width und max-width nicht vom IE6 unterstützt werden.

**ChrMue** · 28.09.2009, 13:16

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>test</title>
  <style type="text/css">
  /* <![CDATA[ */
    
    #leftx {
      float:left;
      width:80px;
      height:1px;
      background-color:red;
    }
    #content {
      float:left;
      width:960px;
      height:100%;
      background-color:blue;
    }
  /* ]]> */
  </style>
  </head>
  <body>
  <div id="leftx">
  </div
  <div id="content">
  </div>
  </body>
</html>

Beim kleiner Auflösung bleibt ein 80x1 großer Bereich ober über dem Contentbereich. Vielleicht kann man diesen vertuschen