Bond246
Bekanntes Mitglied
Hallo :hal:
Ich werd hier mal wieder Wahnsinnig mit dem CSS :wah:
Folgenden Aufbau will ich erst mal erklären, bevor ich fortfahre:
Der HTML-Code ist folgender:
Dazu kommt folgender relevanter CSS-Code:
Das Problem ist jetzt, dass das Floating der beiden Content-Div's (.main-content und .sidebar) offensichtlich dafür sorgt, dass die darum liegenden divs "übergangen" werden. Normalerweise sollten diese ja mit dem Inhalt der inneren Container "wachsen".
Sobald das floating drin ist, machen sie das jedoch nicht mehr. Aber ohne Floating wäre die Sidebar unter dem Inhalt, was natürlich nicht Sinn der Sache ist
Aufgefallen ist mir das erst, als der Inhalt "mehr" sein sollte, als durch das "min-height" im .content-div abgedeckt.
Woran liegt das?
Warum sorgt das floating dafür, dass es plötzlich nicht mehr funktioniert?
Ich habe auch schon alternativen versucht und z.B. den Container-Div weggelassen. Aber das funktioniert auch nicht, genauso wenig, wie die Nutzung von spans anstatt divs, um den Umbruch zu vermeiden.
Danke für eure Unterstützung
Bond
Ich werd hier mal wieder Wahnsinnig mit dem CSS :wah:
Folgenden Aufbau will ich erst mal erklären, bevor ich fortfahre:
Der HTML-Code ist folgender:
HTML:
<div class="container">
<div class="head">
<?php include "head.php"; ?>
</div>
<div class="content">
<div class="main-content">
<?php include $dateien[$id]; ?>
</div>
<div class="sidebar">
<?php include $sidebar[$id]; ?>
</div>
<div class="footer"><a name="unten"></a>
</div> <!-- of Footer -->
</div> <!-- of Content -->
</div> <!-- of Container -->Dazu kommt folgender relevanter CSS-Code:
Code:
.container {
background: #8c1717;
width: 960px;
padding: 0px 2px;
margin: -21px auto -8px auto;
}
.head {
background: url(head_bg.jpg) no-repeat;
width: 960px;
height: 350px;
margin-bottom: 2px;
}
.content {
background: url(content_bg.png) #5c2727 no-repeat;
width: 960px;
min-height: 425px;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
.main-content {
width: 660px;
float: left;
padding: 30px 20px 20px 30px;
text-align: left;
}
.sidebar {
width: 220px;
float: right;
padding: 10px 20px 10px 10px;
}Das Problem ist jetzt, dass das Floating der beiden Content-Div's (.main-content und .sidebar) offensichtlich dafür sorgt, dass die darum liegenden divs "übergangen" werden. Normalerweise sollten diese ja mit dem Inhalt der inneren Container "wachsen".
Sobald das floating drin ist, machen sie das jedoch nicht mehr. Aber ohne Floating wäre die Sidebar unter dem Inhalt, was natürlich nicht Sinn der Sache ist
Aufgefallen ist mir das erst, als der Inhalt "mehr" sein sollte, als durch das "min-height" im .content-div abgedeckt.
Woran liegt das?
Warum sorgt das floating dafür, dass es plötzlich nicht mehr funktioniert?
Ich habe auch schon alternativen versucht und z.B. den Container-Div weggelassen. Aber das funktioniert auch nicht, genauso wenig, wie die Nutzung von spans anstatt divs, um den Umbruch zu vermeiden.
Danke für eure Unterstützung
Bond
