|
|||
Div Wight Auto????
Div Wight Auto????
Beitragvon temp11 » 20.06.2009, 10:41 Hallo Leute, Ich habe ein insgesammt 3 Divs und eine Liste. Div 1 ist der Div in dem sich Div 2 und Div 3 befinden er hat eine feste Größe 500px. Div 2 und Div 3 sollen nebeneinander (also float:left) in Div 1 erscheinen. Die größe von Div 2 wird durch die Größe der Liste UL in Div 2 bestimmt. Die größe von Div 3 soll den noch freien Platz zwischen Div 2 und dem Rechten Rand von Div 1 ausfüllen. Zur Veranschaulichung gibts eine Skizze. Meine Frage Wie zum Geier mach ich das???? Ich will keine Tabelle nutzen um das Problem zu lösen! |
Sponsored Links |
|
|||
So wirds gemacht;
Wichtig ist nur das der dritte Div kein float bekommt, dann Stretcht er --> ist zwar komisch, is aber so. HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html style="height:100%;width:100%"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Beispiel</title> <style type="text/css"> div { border-style:solid; border-width:1; margin:0px; padding:0px; } #eins { Width:500px; background-color:black; } #zwei { Height:100px; background-color:green; float:left; } #drei { background-color:red; Height:100px; } </style> </head> <body> <div id="eins"> <div id="zwei">Ziemlich Breiter Inhalt.</div> <div id="drei">Inhalt</div> </div> </body> </html> |
Sponsored Links |
|
|||
Zitat:
Geändert von regloh (23.06.2009 um 16:46 Uhr) |
|
|||
Es ist in der Hinsicht komisch, dass es im Technischen Sinne die Bedeutung von Float überlädt;
Das Standard-Verhalten eines Div's ist, die gesamte Breite unabhängig vom Inhalt einzunehmen. Wenn du nun Float setzt drehst du dieses Standard verhalten und es gibt soweit ich weiss keine Möglichkeit mit zusätzlichen CSS/HTML Elementen einem Floatenden Div zu sagen das es trotzdem die Breite einnehmen soll. Obwohl aus der Sicht eines Anwenders durchaus Sinn machen kann, dieses Verhalten bei einem floatenden Div zu beinflussen. Also; A: Div mit Float wachsend B: Div mit Float nicht wachsend Ich seh durchaus beide Anwendungszwecke, Faktisch kannst du es aber nicht mit CSS, sondern du musst das Float wegnehmen. --> Überladung |
|
|||
Zitat:
|
|
|||
Zitat:
Ist ja meistens so das jemand Fragt, "wie bekomm ich es gebacken dass ein DIV neben dem andern DIV liegt und nicht unter dem andere" Dann wird (auch in diesem Forum) teilweise Empfohlen Float zu verwenden, und da denke ich ist es eine legitime Anforderung bis nach "rechts" aufzufüllen oder eben nicht. --> Wenn du wie du sagst kein Float verwendest müsste das DIV ja unter dem Div dargestellt werden. Die andere Möglichkeit das div "Rechts" darzustellen ist glaube ich dann margin-left:0 auto. (Was ich um sowas wie zentrierung/auffülen abzubilden genau so schlecht finde) Geändert von Lexodus (23.06.2009 um 17:37 Uhr) |
|
|||
@Regloh
Genau dieses Beispiel; (2 Divs, der "erste" floatet, damit der Zweite rechts neben diesem Div ist). Hier erreichst du eben genau dieses Auffüllen oder nicht nur mit Float und das empfinde ich als überladung. HTML-Code:
#eins { Height:100px; Width:100px; background-color:green; float:left; } #zwei { Height:100px; background-color:blue; } <div id="eins"></div> <div id="zwei"></div> Ich muss jetzt leider weg, deine Meinung würde mich aber doch noch interessieren. Geändert von Lexodus (23.06.2009 um 17:50 Uhr) |
|
|||
Zitat:
Klar muss das floatende Element zuerst kommen. Wenn #zwei als erstes im Markup stehen würde, würde es ja die komplette Breite einnehmen und #eins hätte dann keinen Platz mehr und rutscht unter #zwei. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 20:29 |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 16:41 |
Schriftfarbe in den Eintragungsfeldern von jforms | Steveislucky | CSS | 2 | 16.03.2010 11:59 |
rätselhafter Leerraum zwischen Content und Footer im IE | jhonnybravo | CSS | 5 | 04.03.2010 12:47 |