nicht angemeldet
Können aktuelle Browser sowas wie "width:100%-300px"?
0 0 0 Alternative display:table
0 0 
suit
0
Können aktuelle Browser sowas wie "width:100%-300px"?
Hallo!
Ich habe zwei Spalten, die linke soll eine variable Breite haben, die rechte eine feste Breite von 300px. Nun ist die Reihenfolge im Quelltext unveränderlich, erst die linke Spalte, dann die rechte, so dass ich mit float nicht weiterkomme, da bei float ja zuerst die Spalte mit fester Breite kommen müsste.
Die einzige Möglichkeit, die ich gefunden habe, ist, die flexible linke Spalte mit "width:auto" und "padding-right:300px" zu definieren, und die rechte Spalte mit "position:absolute" und "right:0", was aber bei längerer rechter Spalte Probleme macht, die ich nur mit JS in den Griff bekomme.
Habe ich was übersehen? Gibt es inzwischen sowas wie "width:100%-300px", ohne JS einzusetzen? Es muss nur in FF und Webkit laufen.
Danke für Hinweise!
-
Habe ich was übersehen? Gibt es inzwischen sowas wie "width:100%-300px", ohne JS einzusetzen? Es muss nur in FF und Webkit laufen.
calc() kann sowas und wird von so manchem aktuellen Browser unterstützt (teilw. mit vendor prefix)
MfG
bubble--
If "god" had intended us to drink beer, he would have given us stomachs. - David Daye-
calc() kann sowas und wird von so manchem aktuellen Browser unterstützt (teilw. mit vendor prefix)
Na super, das kannte ich noch nicht, besten Dank! Eigentlich ist die Frage damit schon beantwortet, und könnte höchstens noch durch eine Lösung verbessert werden, die auch Opera 11.64 einbezieht, den ich immer noch als Hauptbrowser verwende.
Gruß
Zecke-
Eigentlich ist die Frage damit schon beantwortet, und könnte höchstens noch durch eine Lösung verbessert werden, die auch Opera 11.64 einbezieht, den ich immer noch als Hauptbrowser verwende.
Es muss nur in FF und Webkit laufen.
???
Ich habe zwei Spalten, die linke soll eine variable Breite haben, die rechte eine feste Breite von 300px.
<div id="wrapper"> <div id="cell_1"> <p>Text in Spalte 1</p> </div> <div id="cell_2"> <p>Text in Spalte 2</p> </div> </div>#wrapper { display: table; width: 100%; } div[id^="cell"]{ display: table-cell; } #cell_1 { background-color: #FCC; } #cell_2 { width: 300px; background-color: #CCF; }Gruß Gunther
-
Hallo Gunther,
Eigentlich ist die Frage damit schon beantwortet, und könnte höchstens noch durch eine Lösung verbessert werden, die auch Opera 11.64 einbezieht, den ich immer noch als Hauptbrowser verwende.
Es muss nur in FF und Webkit laufen.
???
Es ist ein User-Stylesheet, das aber bei mehreren Leuten laufen soll.
Gute Idee! Leider sind in dem Wrapper ober- und unterhalb der beide Spalten noch andere Elemente, die über die gesamte Breite angezeigt werden sollen. Die kriegt man zwar mit "display:table-row" aus der Anordnung nebeneinander wieder raus, doch habe ich es noch nicht hinbekommen, sie über die gesamte Breite anzeigen zu lassen. Sie sind immer nur so breit wie die erste der beiden Spalten, es fehlt sowas wie colspan in CSS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>test</title> <style type="text/css"> html, body { width: 100%; margin: 0; padding: 0; } #wrapper { display: table; width: 100%; } div[id^="cell"] { display: table-cell; } #cell_1 { background-color: #FCC; } #cell_2 { width: 300px; background-color: #CCF; } #header, #footer { display: table-row; width: 100%; background-color: #CFC; } </style> </head> <body> <div id="wrapper"> <div id="header"> <p>Text über die gesamte Breite</p> </div> <div id="cell_1"> <p>Text in Spalte 1</p> </div> <div id="cell_2"> <p>Text in Spalte 2</p> </div> <div id="footer"> <p>Text über die gesamte Breite</p> </div> </div> </body> </html>Gruß
Zecke-
Gute Idee! Leider sind in dem Wrapper ober- und unterhalb der beide Spalten noch andere Elemente, die über die gesamte Breite angezeigt werden sollen. Die kriegt man zwar mit "display:table-row" aus der Anordnung nebeneinander wieder raus, doch habe ich es noch nicht hinbekommen, sie über die gesamte Breite anzeigen zu lassen. Sie sind immer nur so breit wie die erste der beiden Spalten, es fehlt sowas wie colspan in CSS.
Du kannst auch ein User-JavaScript verwenden - in Opera und Chrome nativ oder im Firefox halt mit einer Add-On-Krücke wie GreaseMonkey.
-
Du kannst auch ein User-JavaScript verwenden - in Opera und Chrome nativ oder im Firefox halt mit einer Add-On-Krücke wie GreaseMonkey.
Ja stimmt, ich war mir nur nicht sicher, ob es nicht vielleicht doch ohne geht, da ich nicht mehr auf dem Laufenden bin. Und gerade bei CSS hatte ich schon einige Aha-Erlebnisse; erst selber lange erfolglos versucht, aber mit KnoffHoff ging es dann doch.
Danke nochmal an alle!
Gruß
Zecke
-
-
Hallo Zecke!
Gute Idee! Leider sind in dem Wrapper ober- und unterhalb der beide Spalten noch andere Elemente, die über die gesamte Breite angezeigt werden sollen.
... es fehlt sowas wie colspan in CSS.Ja, wenn das so ist, stößt diese Methode (wie du schon richtig erkannt hast) an ihre Grenzen.
In deinem Fall kannst du aber auf die von suit vorgeschlagene Variante ausweichen.
Gruß Gunther
-
-
-
-