layout-frage

yeti66

Mit den gleichen Höhen wird es nie so einfach werden, wenn Du keine Faux Columns Technik anwenden möchtest. Hier mal eine Lösung mit
overflow: hidden .

HTML

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
* {margin: 0;padding: 0;border: 0;}
body {background-image:url(../images/bg.png);background-color:#111;text-align:center;min-width: 800px;}
#wrapper {width:800px;margin: 0 auto;}
#header, #menu, #col-left,#col-right, #footer {border:solid #ccc 1px;}
#header {width:auto;height:100px;margin-bottom:22px;}
#menu {width:auto;margin-bottom:22px;height:25px;}
#wrap {width:auto;color:#999;text-align:justify;overflow: hidden;}
#col-left {width: 580px;float:left;padding-bottom: 32768px;margin-bottom: -32768px;}
p { margin:5px;}
#col-right {width:200px;padding-bottom: 32768px;margin-bottom: -32768px;float: right;}
#footer {clear:both;width:auto;height:25px; margin-top:22px;}
h2 {font-family:Arial, Helvetica, sans-serif;font-size:medium;color:#999;border-bottom:1px solid #333333; margin:5px;}
-->
</style>
</head>
<body>
<div id="wrapper">
  <div id="header"></div>
  <div id="menu"></div>
  <div id="wrap">
    <div id="col-left">

      <h2># Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat     volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo                 consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla         facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla         facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna    aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea    commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu             feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te    feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer    possim assum. </p>
    </div><div id="col-right"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat     volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo                 consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla         facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla         facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna    aliquam erat volutpat.</p></div>
  </div>
  <div id="footer"></div>
</div>
</body>
</html>

Alles anzeigen

Das Manko: die fehlende untere Abschlußlinie, so man einen Rahmen setzt.

koslowski

Moin,

Zitat von yeti66

Mit den gleichen Höhen wird es nie so einfach werden, wenn Du keine Faux Columns Technik anwenden möchtest. Hier mal eine Lösung mit
overflow: hidden . Das Manko: die fehlende untere Abschlußlinie, so man einen Rahmen setzt.

sorry, aber "Equal Height Columns" ist wohl kaum die richtige Methode um damit zu arbeiten.

Die Kombination von overflow:hidden mit verlängerten Spalten führt zu inkonsistenten Verhalten bei Links zu Ankern, deren Ziel innerhalb des Overflow-Elements liegt.
FF und IE7, IE6 bewegen die Inhalte innerhalb des overflow-Containers.
Die Folge ist das alle Inhalte oberhalb des Ankerziels nach oben ins Nirwana verschwinden.

Das ist nur eins der Probleme von "Equal height Columns".

Wenn schon dann "Companion Columns Technik", die ist
nebenwirkungsfrei.

Allerdings wäre das mit Kanonen auf Spatzen geschossen und für CSS-Anfänger vollkommen ungeeignet.

Warum sollte man "Faux Columns" nicht anwenden wollen?
Ist doch einfach und funktioniert problemlos.

koslowski

yeti66

Für mich persönlich wäre das auch nicht die Ideallösung. Hier ging es ja auch nur um eine Annäherung an den Screen des Layouts, mehr nicht. Hier würde ich eher einen Container relativ mit voller Breite (width:auto;) setzen (für den Content) und den Info-Container im Content verschachtelt setzen, inclusive einem linken Rand im Info-Bereich um den Content von der Info-Leiste optisch abzugrenzen (#info {position: absolute top right;..und border-left: solid #ccc 1px;}). Ich denke damit könnte man leben ohne Grafik einsetzen zu müssen und das ist ja sein Ziel.

Tags