zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Dynamisches Container-Div für floating Divs

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.09.2007, 10:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2007
Beiträge: 6
Scogit befindet sich auf einem aufstrebenden Ast
Standard Dynamisches Container-Div für floating Divs

Servus,

ich hab ein Problem ich möchte gerne ein Container-Div mit einer festen Breite und variablen Höhe haben für einen Hauptbereich mit 3 Spalten, die 2 Spalten links sind mit float:left definiert die rechte mit float:right.
Werden aber innerhalb des mittleren Divs weitere Divs definiert gehen diese über die mittlere Spalte bzw. über das komplette Container-Div hinaus (Was bei normalen Text allerdings auch passiert) lässt sich das irgendwie so hinkriegen das alles in der Höhe mitwächst?
Wo liegt da mein Problem?

PHP-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">
<
head>
<
meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<
title>Div Problem</title>
<
style type="text/css">
<!--

* {
    
font-familyTimessans-serif;
    
font-size14px;
    
margin0;
    
padding0;
}

body {
    
font-familyTimessans-serif;
    
font-size14px;
    
padding10px;
    
margin0;
}

div.page {
    
margin-leftauto;
    
margin-rightauto;
    
border1px solid black;
    
width900px;
    
height800px;
}

div.header {
    
height80px;
    
width:     100%;
}

dif.footer {
    
height30px;
    
width100%;
}

div.middle {
    
width100%;
    
height690px;
}

div.left_menu {
    
width190px;
    
height100%;
    
floatleft;
}

div.main {
    
floatleft;
    
height100%;
    
width500px;
    
background-colororange;
}

div.right_menu {
    
width190px;
    
floatright;
    
height100%;
}

//-->
</style>
</
head>
<
body>
<
div class="page">
    <
div class="header">Header</div>
    <
div class="middle">
        <
div class="left_menu">Left</div>
        <
div class="main">
            <
div style="width: 400px; height: 300px; border: 1px solid red; margin: auto;">Ein Div</div><br>
            <
div style="width: 400px; height: 300px; border: 1px solid red; margin: auto;">Ein Div</div><br>
            <
div style="width: 400px; height: 300px; border: 1px solid red; margin: auto;">Ein Div</div><br>
        </
div>
        <
div class="right_menu">Right</div>
    </
div>
    <
div class="footer">Footer</div>
</
div>
</
body></html
ps: Bei den Problemen die bei Divs auftreten kann ich einerseits verstehen warum Table-Layouts immer noch sehr beliebt sind.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.09.2007, 11:07
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Die feste Höhe (height: 100%;, siehe dazu auch Seite auf 100% Höhe - XHTMLwiki) hindert am Mitwachsen. Desweiteren siehe FAQ Punkt 2.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.09.2007, 11:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2007
Beiträge: 6
Scogit befindet sich auf einem aufstrebenden Ast
Standard

Das will mir nicht so ganz einleuchten, zum einen weil ich das gar nicht 100% hoch haben möchte außerdem sollen oben und unten min. 10px abstand sein und da macht 100% immer Probleme. Zum anderen wenn ich das Versuche wächst das Container überhaupt nicht mit... sondern bleibt genauso groß wie der Bereich Banner.

Mir gefällt diese Div-K... gar nicht wenn das weiter so kompliziert bleibt ...
Mit Zitat antworten
  #4 (permalink)  
Alt 14.09.2007, 11:36
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Du hast mehreren Elementen height: 100%; gegeben - auf dem Link wird erklärt, warum das nicht funktioniert. Wirf diese height-Deklarationen raus, und siehe für's "Mitwachsen" nebeneinander liegender divs FAQ Punkt 1.

Ohne height der 3 Spalten und mit einem clear (FAQ Punkt 2) für den Footer läuft alles. Dieser sollte dann innerhalb von #middle (das Du allerdings gar nicht brauchst) stehen, damit dieses die Floats einschließt.

Und: Nicht die divs sind das Problem, sondern Unwissenheit & Ungeduld vieler Webautoren

Geändert von heiko_rs (14.09.2007 um 11:38 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 14.09.2007, 11:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2007
Beiträge: 6
Scogit befindet sich auf einem aufstrebenden Ast
Standard

Wenn man mehrere Tage an so einen Problem hängt welches man mit Tables innerhalb 10 sekunden lösen kann ist das durchaus verständlich.

Ich möchte ja Div layouten erlernen nur teilweise erscheint mir das nur unlogisch.
Mit Zitat antworten
  #6 (permalink)  
Alt 14.09.2007, 11:51
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Scogit Beitrag anzeigen
Wenn man mehrere Tage an so einen Problem hängt welches man mit Tables innerhalb 10 sekunden lösen kann ist das durchaus verständlich.
Ich löse das mit divs in 10 Sekunden, aber das habe ich auch nicht an einem Tag gelernt. Wie gesagt, Geduld ist alles, wie in jedem anderen Bereich auch.
Mit Zitat antworten
  #7 (permalink)  
Alt 14.09.2007, 14:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2007
Beiträge: 6
Scogit befindet sich auf einem aufstrebenden Ast
Standard

Das Wiki ist irgendwie unverständlich. Ich hab es an meinen Beispiel probiert. Setze ich sowohl Body als auch HTML auf 100% (so wie es ganz unten im Wiki steht) funktioniert es nicht setze ich aber nur Body auf 100% funktioniert mein Beispiel.
Mit Zitat antworten
  #8 (permalink)  
Alt 14.09.2007, 17:52
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von xhtmlwiki.de
100% sind eine relative Angabe. 100% wovon? Vom Elternelement bzw. dessen Höhe.
Das bedeutet: height in Prozent wird nur angewandt, wenn das Elternelement ebenfalls eine height-Angabe hat. Da das bei Dir nicht zutrifft, wirkt height: 100%; für Content und Menüs nicht, daher (wie gesagt) siehe FAQ Punkt 1.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fullscreen Container mit internen divs purewhite (X)HTML 1 02.11.2009 15:24
divs in div gleichmäßige größe cb01 (X)HTML 7 17.02.2008 20:05
Höhenanpassung von divs localex CSS 1 21.11.2007 11:25
div container verschachteln blau CSS 2 05.12.2006 19:44
Floating auf DIV Container beschränken?! dschalle CSS 8 06.05.2004 20:35


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:47 Uhr.