Block-Elemente gleich hoch?
0 
rfb
0
Block-Elemente gleich hoch?
Hallo,
ich habe ein kleines Problem, und bisher nur eine Lösung mit JS gefunden. Möchte das aber nach Möglichkeit ohne JS erledigen.
Problem:
Zwei Blockelemente direkt nebeneinander. das linke Element hat immer den gleichen Inhalt, im rechten Element ändert sich aber die Textmenge und somit die Höhe. Der Hintergrund des linken Elements soll aber immer bis zum Ende des rechten Elements gehen.
Folgend mein Code:
<style type="text/css">
#container {
width:100px;
height:auto;
}
#col_1 {
width:48px;
height:auto;
float:left;
background-color:#66FF99;
border:1px solid #0000FF;
}
#col_2 {
width:48px;
height:auto;
float:left;
border:1px solid #0000FF;
}
</style>
<body style="width:auto; height:auto;">
<div id="container">
<span id="col_1">
<p>etwas Text</p>
</span>
<span id="col_2">
<p>
Viel Text<br />
...<br />
...<br />
...<br />
...<br />
</p>
</span>
</div>
</body>
_EOF
Den "container" verwende ich, weil drum rum auch noch allerlei "Zeugs" ist.
Danke und schönes WE!
Mathias
-
Moin
das
<span id="col_1">
<p>etwas Text</p>
</span>geht schon mal gar nicht. span darf nicht p enthalten.
Dein Problem wäre vermutlich gelöst, wenn das umgebende Element beider "container" denselben Hintergrund hat wie der kürzere.
Gruß
rfb--
Man kann einen Menschen nichts lehren, man kann ihm nur helfen, es selbst zu entdecken.
(Galileo Galilei)-
Moin,
im Original hab ich auch div statt span stehen, das kam wohl noch vom probieren :-(
Das mit dem Hintergrundbild in "container" habe ich bereits probiert, funktioniert aber nicht, da "container" vom Browser (IE und FF) offensichtlich als inhaltsleer interpretiert und somit nicht dargestellt wird. Ich schätze auch, dass ich da 'nen Denkfehler oder sowas hab.
Danke,
Mathias-
Problem gelöst! Wie befürchtet stand ich mal wieder komplett auf'm Schlauch.
Ein "float:left;" im Elternelement hat das Problem gelöst...
Trotzdem danke für Eure Hilfe!!
Mathias
-
-
-
gib deinem container eine hintergrundgrafik welche die länge nur suggeriert ;)
style="width:auto; height:auto;" für den body kannst du dir uebrigns sparen
zudem:
"Zwei Blockelemente direkt nebeneinander."span ist ein generisches inline-element
div ist das generische block-elementwenn du einem inline element aber float: left/right zuweist, wird aus ihm automatisch ein block-element - das verwirrt beim lesen wenn der quelltext spaeter komplizierter wird ;)