Du befindest Dich im Archiv vom ABAKUS Online Marketing Forum. Hier kannst Du Dich für das Forum mit den aktuellen Beiträgen registrieren.

div Container – Ich bin zu blöd

Ajax, Hijax, Microformats, RDF, Markup, HTML, PHP, CSS, MySQL, htaccess, robots.txt, CGI, Java, Javascript usw.
CubeMaster
PostRank 7
PostRank 7
Beiträge: 547
Registriert: 15.12.2004, 21:21

Beitrag von CubeMaster » 13.07.2011, 17:23

Hallo Freunde,

ich bin gerade dabei ein Layout komplett mit divs statt Tabellen aufzuziehen. Anfänglich liefs gut, doch jetzt häng ich und hab auch keine Lösung bei diversen Tutorial-Seiten gefunden :(

Es geht um 2 einfache Dinge:
1. Wenn ich in der Navi (.navi_left) und im Contenbereich (.content_main) etwas schreibe und umbreche, dann soll sich die Größe des umliegenden DIV-Containers (#content) vertikal mit vergrößern. Das tut er aber bis jetzt nicht, sonder hängt drüber.

2. Die vertikale Größe der Layer soll immer 100% betragen, sodass der Footer DIV (#footer) am unteren Rand des Browsers hängt.

Es wäre echt super, wenn mir einer von euch auf die Sprünge helfen könnte, denn ich verzweifle hier noch :(

Code: Alles auswählen

<body>
  <div id="root">
    <div id="head">
    </div>
    <div id="content">
      <div class="navi_left">
        Navigation<br>
        test<br>
        test<br>
        
        test<br>
      </div>
      <div class="content_main">
        Inhalt
      </div>
    </div>
    <div id="footer">
    </div>
  </div>
</body>

Code: Alles auswählen

body &#123;
	font-family&#58; Verdana, Arial, Helvetica, sans-serif;
	font-size&#58;11px;
	text-align&#58;left;
	color&#58; #555555;
	height&#58;100%;
	margin&#58; 0px auto;
	padding&#58;0px;
	&#125;

#root &#123;
    width&#58;900px;
    min-height&#58; 100%;
    height&#58; 100%;
    margin&#58; 0px auto;
    text-align&#58; left;
    color&#58; #666666;
    background-color&#58; #ffffff;
    &#125;
	
#head &#123;
    height&#58; 100px;
    border&#58; 1px solid #cccccc; border-top&#58; 0px;
    margin&#58; 0px 0px 20px 0px;
    &#125;

#content &#123;
    min-height&#58; 100%;
    height&#58;100%;   
    border&#58; 1px solid #cccccc;
    margin&#58; 0px;
    &#125;
	
.navi_left &#123;
    width&#58; 170px;
    min-height&#58; 100%;
    height&#58;100%;
    float&#58; left;
    border&#58; 0px solid #ffffff;
    background-color&#58; #f8f8f8;
    padding&#58; 30px 0px 0px 20px;
    &#125;

.content_main &#123;
    width&#58; 688px;
    min-height&#58; 100%;
    height&#58; 100%;
    float&#58; right;
    border&#58; 0px;
    padding&#58; 30px 0px 0px 20px;
    &#125;
	
#footer &#123;
    border&#58; 0px solid #cccccc; border-bottom&#58; 0px;
    background-color&#58; #333333;
    height&#58; 100px;
    margin&#58; 0px;
    &#125;
[/code]