div-width problem: zwei divs feste breite, eins relativ

[Sander]

hallo!

ich bin grad dabei unsere ganzen Webseiten (bzw. erstmal unsere größte) von tabellen-layout auf divs umzustellen, aufgrund der tatsache das ich auf der strasse angespuckt und mit steinen beworfen werde, da ich bis anfang 2008 meine seiten noch mit tabellen-layouts gemacht habe.
ich bin am zusammenbrechen - ich probiere das jetzt den ganzen tag, hab ca. 10000000 webseiten und foren durchgelesen, befreundete entwickler gefragt - keiner hat eine antwort auf diese extrem hochkomplizierte frage.

problem: ich habe 3 divs die nebeneinander stehen, davon haben die ersten beiden eine fest größe in pixeln, das dritte hingegen soll den gesamten restlichen platz bis zum rechten browserrand bekommen - so wie es standard ist bei tabellen.

code:

<div style="float:left; height:78px; width:180px; background-color:red; margin-right: 6px;">eins</div>
<div style="float:left; height:78px; width:500px; background-color:red; margin-right: 6px;">zwei</div>
<div style="float:left; height:78px; width: *; background-color:red;">drei</div>

das funktioniert nicht, das 3. div ist bloß so breit wie sein inhalt (das wort "drei"). wenn ich im 3. div die width auf auto setze, passiert das selbe wie bei *, setze ich es auf 100%, bekommt das 3. div die gesamte breite des browserfensters und wird auf die nächste zeile umgebrochen, damit es in seiner ganzen 100%-pracht dargestellt werden kann.

also mit tabellen hab ich das innerhalb einer minute hinbekommen - mit der hochmodernen und wunderbaren div-methode, die ja heute von allen empfohlen wird, während einen kinder die grad aus dem studium entlassen wurden und noch nie gearbeitet haben (geschweigedenn eine seite programmiert), auslachen, weil man "immer noch" html-tabellen nutzt.

übrigens hab ich genauso lange gesessen und bin verzweifelt, beim versuch, text mit css vertikal zu positionieren (middle), was nicht über brauchbare methoden wie vertical-align, sondern nur über spezialtricks geht, wie margin-hacks oder die line-height so hoch machen wie das element. normal zentrieren kann man ja laut selfhtml und anderen auch nur noch über margin-tricks - das gute alte align-attribut war wohl schlicht zu einfach zu benutzen - also muss man das ändern!

wirklich eine tolle, neue und vorallem benutzerfreundliche css-welt - die ja nun alles verbessert was so schlimm war mit tabellen.

ich hoffe ernsthaft das vielleicht jemand von euch einen brauchbaren tipp hat, wie ich das morgen hinbekomme, andernfalls hoff ich das ich bis dahin auf der strasse überfahren werde! noch mehr zeit will ich nicht in diesen cascading-style-sh*t stecken!

ps: hat jemand ne idee, auf welcher art von drogen die jungs vom w3c waren als sie sich DAS ausgedacht haben?? und auf welchen die leute waren/sind die das bis heute befürworten?

[gelu]

Hallo Sander,

<div style="float:left; height:78px; width:180px; background-color:red; margin-right: 6px;">eins</div>
<div style="float:left; height:78px; width:500px; background-color:red; margin-right: 6px;">zwei</div>
<div style="float:left; height:78px; width: *; background-color:red;">drei</div>

lass float und width beim 3.div weg und gib ihm den richtigen Abstand nach links.

Beste Grüße,
gelu

[Sander]

Hallo Sander,

<div style="float:left; height:78px; width:180px; background-color:red; margin-right: 6px;">eins</div>
<div style="float:left; height:78px; width:500px; background-color:red; margin-right: 6px;">zwei</div>
<div style="float:left; height:78px; width: *; background-color:red;">drei</div>

lass float und width beim 3.div weg und gib ihm den richtigen Abstand nach links.

Beste Grüße,
gelu

WWHUUAAAHH!!!! Das funktioniert scheinbar! Unglaublich...habs grad mal in einer lokalen Testseite probiert, da ich ja zuhause bin und nicht im Büro, und das hat zumindest perfekt geklappt so wie ich will!! Ich probiere es morgen gleich in unserer Seite aus.

Vielen, vielen Dank! Super!

PS: Wie kommt man nur auf sowas, ich hab echt soviel probiert und selbst nen Kollege von einer anderen Firma hat unzählige Tips gegeben und alles hat nicht funktioniert!
Sorry, das ich das Posting nicht als hilfreich bewerten kann, dazu muss man hier angemeldet sein. Aber sollt ich vielleicht mal machen, habe hier im Forum viele Dinge gesehen bei den ich auf jeden Fall helfen könnte.

[ChrisB]

Hi,

PS: Wie kommt man nur auf sowas,

Die Frage sollte doch eher sein, wie man auf so einen Unfug kommt:

<div style="float:left; height:78px; width: *;

• ein wenig grundlegende Beschaeftigung mit CSS haette doch ausgereicht, um erkennen zu koennen, dass * kein gueltiger Wert fuer die Eigenschaft width ist.

MfG ChrisB

[Sander]

Hi,

PS: Wie kommt man nur auf sowas,

Die Frage sollte doch eher sein, wie man auf so einen Unfug kommt:

<div style="float:left; height:78px; width: *;

• ein wenig grundlegende Beschaeftigung mit CSS haette doch ausgereicht, um erkennen zu koennen, dass * kein gueltiger Wert fuer die Eigenschaft width ist.

MfG ChrisB

auf den unfug kommt man, indem man weiß das * seit jahren eine durchaus gültige angabe bei width ist, zb in tabellen oder frames. und wie ich schrieb, hat das den selben effekt wie "auto" was definitiv laut selfhtml eine gültige angabe ist. ich war halt verzweifelt und hab einfach alles versucht! ;-)

und wie ich in meinem ersten posting schrieb, stelle ich grad alles von tabellen auf divs um.
und die grundlegende beschäftigung mit css war bei mir vor 8 jahren (und immer zwischendurch mal ein wenig, so wie jetzt), offenbar haben sich einige dinge geändert.

ok, habe es jetzt in unsere seite eingebaut und es hat zu 99% perfekt funktioniert - das div lag zwar ganz rechts und ist größer/kleiner geworden wenn man das fenster ändert, aber es geht zusätzlich auch noch mit bis ganz nach links und liegt dann hinter den anderen beiden divs. da zwischen jedem div 6px weißer abstand ist, sieht man das div durch. musste die abstände, die ich vorher mit margin realisiert hatte, jetzt auch in 6px-große divs ändern, jetzt sieht es so aus wie ich will!

danke nochmal!