✔ div height=100%

Status
Nicht offen für weitere Antworten.
O

online

Erfahrenes Mitglied
Hallo,

ich wollte gerade ein Template bauen, das im Prinzip aus drei Ebenen besteht (siehe unten).

Ebene C umschließt alles,
Ebene B soll den Text beinhalten, also wenn die größer wird, soll auch Ebene C größer werden. Aber Ebene B soll auch in Ebene C von oben bis unten gehen.

Und Ebene A soll genau so groß sein, wie Ebene B.

Leider funktioniert gerade das überhaupt nicht.

Kann mir bitte jemand sagen, wie das funktioniert, bevor ich ganz den Überblick verlier.

MFG

Online
 

Anhänge

  • Unbenannt-1.gif
    Unbenannt-1.gif
    2,5 KB · Aufrufe: 115
Hier der überarbeitete / reduzierte CSS-Code für ein 2-spaltiges Layout.

(Quelle: http://www.redmelon.net/tstme/3cols2/)

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" xml:lang="en" lang="en">
<head>
<title>Equal-Height CSS Columns - Keeping it tall - redmelon.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
<!--
/* Optional Code */
body { color: #000; background-color: #fff; text-align: justify; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 86%; }
p  { padding: 0.5em; margin: 0; font-size: 1em; }
h1 { padding: 0.5em; margin: 0; font-size: 1.3em; font-weight: normal; }
h2 { padding: 0.5em; margin: 0; font-size: 1em; font-weight: bold; }
ul { padding-right: 1em; text-align: left; margin-bottom: 1em; }


.wrapper { min-width: 400px; }
          /* Allways good to have on full width liquid CSS layouts,
             google "min-width IE" for JS solutions there */

.wrapper { border: 1px solid black; margin: 0 -1px; }
          /* this is a border with marginal compensation to stop scroll bars */

/* Setup (This all looks neater when it isn't put on display!) */

.wrapper {
        width: 650px;               /* total width */
        margin: 0 auto;             
}

.outer {
        border-left-width: 300px;  /* left column width */
        border-left-color: #809bbe;   /* left column colour */

        border-right-width: 300px; /* right column width */
        border-right-color: #809bbe;  /* right column colour */

        background-color: #f5f5f5; /* center column colour */
}

.left {
        width: 300px;              /* left column width */
        margin-left: -300px;       /* _negative_ left column width */
}

.right {
        width: 300px;              /* right column width */
        margin-right: -300px;      /* _negative_ right column width */
}

/* Main code */

.outer { width: auto; border-left-style: solid; border-right-style: solid; }
.inner { margin: 0; width: 100%; }

.left { float: left; position: relative; z-index: 10; }
.right { float: right; position: relative; z-index: 11; }

.clear { clear: both; }

/* Mozilla code */
.outer > .inner { border-bottom: 1px solid transparent; }
.left { margin-right: 1px; }
.right { margin-left: 1px; }
-->
</style>

</head>
<body>

<div class="wrapper">

<div class="outer">
<div class="inner">

 <div class="left">
   <p>leftcolumn</p>
   <ul>
     <li>item 1</li>
     <li>item 2</li>
     <li>item 3</li>
   </ul>
 </div>

 <div class="right">
   <p>rightcolumn</p>
   <ul>
     <li>item 1</li>
     <li>item 2</li>
     <li>item 3</li>
     <li>item 4</li>
     <li>item 5</li>
     <li>item 6</li>
     <li>item 7</li>
     <li>item 8</li>
     <li>item 9</li>
   </ul>
 </div>

 <div class="clear"></div>

</div>
</div>

</div>

</body>
</html>
  • Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 8.01
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück