2 Divs mit gleicher Höhenvariablen
Flogag
- css
0 iiyama0 Flogag0 Link!
Flogag0 Ingo Turski0 Flogag
Ich möchte gerne die border vom #content genausohoch anzeigen lassen wie die vom #sub. Beide können allerdings unterschiedlich mit Text etc. befüllt sein - Sprich mal ist der eine Größer mal der andere. Aber insgesamt soll der zwischenraum zum footer mit beiden dis gleichhoch gefüllt sein. Die divs content und sub liegen durch float left nebeneinander und der footer darunter. Wie kann ich das nun lösen? Ich habe schon was mit "height:100%;" versucht, aber das geht nicht.
<div id="cwrapper">
<div id="content">
<div class="headline">Willkommen beim Volleyballverein des VFL Stadthagen</div>
</div>
<div id="sub">
<div class="bgred">News</div>
<div class="sublink"><a href="#" target="_self">Testlink</a></div>
<div class="newshead">Testnews Headline</div>
<div class="newstext">Wenn ich gross bin, will ich Ulysses
von James Joyce werden. Aber jetzt
lohnt es sich noch nicht, mich
weiterzulesen. Denn vorerst bin ich
nur ein kleiner Blindtext.
</div>
<hr />
<div class="newshead">Testnews Headline</div>
<div class="newstext">Wenn ich gross bin, will ich Ulysses
von James Joyce werden. Aber jetzt
lohnt es sich noch nicht, mich
weiterzulesen. Denn vorerst bin ich
nur ein kleiner Blindtext.
</div>
<hr />
<div class="blink"><a href="" target="_self">mehr News</a></div><br /><br />
</div>
<div class="cleaner"></div>
</div>
<div id="footer">
<div class="footnavi"><a href="#" target="_self">Kontakt</a></div>
<div class="footnavi"><a href="#" target="_self">Impressum</a></div>
<div class="cleaner"></div>
</div>
Huch,
du magst divs, oder?
diese massenweise div schachtelung beraubt dich einer logischen dokumentstruktur:
<div id="sub">
<div class="bgred">News</div>
<div class="sublink"><a href="#" target="_self">Testlink</a></div>
<div class="newshead">Testnews Headline</div>
<div class="newstext">Wenn ich gross bin, will ich Ulysses
von James Joyce werden. Aber jetzt
lohnt es sich noch nicht, mich
weiterzulesen. Denn vorerst bin ich
nur ein kleiner Blindtext.
</div>
geht auch zum Beispiel:
<div id="sub">
<h1 class="bgred">News</h1>
<a href="#" class="sublink"[..]></a>
<h2 class="newshead">Testnews Headline</h2>
<p class="newstext">asödkjf aösdklfj aösdklfj </p>
</div>
oder
<div id="footer">
<div class="footnavi"><a href="#" target="_self">Kontakt</a></div>
<div class="footnavi"><a href="#" target="_self">Impressum</a></div>
<div class="cleaner"></div>
</div>
z.B.
<div id="footer">
<a href="#" class="footnavi" [..]
<a href="#" class="footnavi" [..]
</div>
Für das ganze eignen sich auch unheimlich gut CSS Selektoren.
Tschüß
Klar kann man das so machen, aber das löst doch nicht etwa mein Problem?
Mit Selektoren geht das sicher auch nicht!
Ach... man kann sich das ganze auch hier ansehen.
http://files.evom.de/pages/vfl-stadthagen
Hi,
Ach... man kann sich das ganze auch hier ansehen.
http://files.evom.de/pages/vfl-stadthagen
das geht auch grundsätzlich nicht (so), da sich nebeneinander stehene Boxen nicht in ihrer Höhe beeinflussen.
Du könntest aber beide Bereiche nochmals in ein DIV einschließen und diesem dann border-left zuweisen. Wenn Dir der zusätzliche rechte Rand wichtig ist, könntest Du dem umschließenden DIV ein vertikal gekacheltes Hintergrundbild mit beiden Rahmen zuweisen.
freundliche Grüße
Ingo
Oh gut, vielen Dank, dann werd ich das wohl so machen müssen.