Probleme mit 2 Divs (float / clear?)

html.de-Forum HTML, XHTML & CSS
1

Hallo zusammen,

auf stufentheorie.de habe ich Probleme mit zwei Divs.

Problem 1:
Um das Div „container“ soll ein schwarzer Rahmen. Leider hört der Rahmen irgendwo auf der Seite auf (viel zu weit oben) und umschließt nicht die komplette Seite (bis unten).

Problem 2:
Das Div „rechts“ (Menü) soll nicht über das Div „footer“ hinausragen (siehe Startseite).
Ebenso soll es immer 100% des Contents haben.
D.h. der Content (weiß) und die Navigation (blau) sollen immer gleich hoch sein. Entweder muss sich der Content der Navigation anpassen, oder eben die Navigation dem Content … je nach Inhalt.

Ist sowas machbar?

Ich denke, dass das Problem irgendetwas mit float bzw. clear zu tun hat. Wirklich schlau wurde ich aus den Anleitungen, die ich hierzu gelesen habe, jedoch noch nicht.

Hier der CSS-Code:

[CODE]body
{background: url(bg.png) fixed repeat-x; background-color:#FFCC66;
font-family:„arial“;
font-size:12px;
}
#container
{
margin: 0 auto;
margin-top:30px;
width: 800px;
background: #FFFFFF;
border:1px solid #000000;
}
#header
{
background: #FFCC66;
width:800px;
height:80px;
background-image:url(header.jpg);
}
#header h2 {
padding-top:25px;
margin-left:20px;
font-size:34px;
letter-spacing: 2px;}
#header h3 {
padding-top:25px;
margin-left:20px;
font-size:34px; }

#content-container
{
float: left;
width: 800px;
background: #fff
}
#content
{ text-align:justify;
clear: left;
float: left;
width: 540px;
padding: 20px 0;
margin: 0 0 0 20px;
}
#content h2 { margin: 0; }
#rechts
{
float: right;
width: 180px;
padding: 0px;
margin: 0px;
height:100%;

background:#8FC2CC;
}
#rechts ul {
margin: 0;
padding: 0;
list-style: none;
background: #8FC2CC;
}
#rechts li {
border-top: 0px dotted #000000;
border-bottom: 1px dotted #000000;
}
#rechts li a {
display: block;
font-weight: bold;
font-size: 1em;
color: #000000;
text-decoration: none;
padding: 7px 0 4px 20px;
}

li.rechts {
display: block;
font-weight: bold;
color: #ffffff;
border-right: none;
text-decoration: none;
padding: 7px 0 4px 20px;
background:#8FC2CC;
margin-top:20px;
}
#rechts li a:hover {
color: #000000;
background:#FFCC66;
border: 1px solid #000000;
}

#rechts h3 { margin: 0; }

.kasten {
margin-left:100px;
padding:15px;
border: 1px solid #000000;
width: 200px;
}
.kastenbreit {
margin-left:70px;
padding:15px;
border: 1px solid #000000;
width: 320px;
}

.info {

padding:5px;
border: 1px solid #000000;
font-size:10px;
background:#ffffff;
margin-top:9px;
text-align:justify;
}
#footer
{
clear: left;
background: #FFCC66;
text-align: right;
padding:10px;
font-size:10px;
}[/CODE]

Vielen Dank!

2

Das Problem mit dem Border habe ich auch und eigentlich erst seit kurzem. Mir ist aufgefallen, dass der Border nicht die Elemente umschließen kann, die gefloatet werden. Wie man das jetzt löst, kann ich dir nicht beantworten.

Wenn du willst, dass dein Content immer gleich hoch wie die Navigation ist, wird dir Faux Columns weiterhelfen. Brauchst ein zusätzliches background-image, welches du dem Container Div verpasst, diesem background gibst du repeat-y. Die Navigation und der Content dürfen keine background Eigenschaften haben, sprich weder bg-color noch bg-image. So scheint des Hintergrundbild vom container div durch.

Hier eine genaue Beschreibung: Faux Columns

Der div mit id=„rechts“ erhält in deinem CSS float right, der content erhält float left. Jetzt brauch der Footer nicht clear: left, sondern natürlich clear: both, da du ja sowohl float left als auch float right eingesetzt hast. Dann ist der Footer auch automatisch unter den anderen Elementen.

3

Super! Das hat geholfen vielen Dank!

Nun ist das Problem mit dem Rahmen um den kompletten Container, sowie das Problem, dass die Navi immer genauso hoch sein soll wie der Inhalt (100%), noch nicht geklärt.

4

Bei dem Rahmen kann ich dir nicht weiterhelfen, für dein 2. Problem musst du wie schon gesagt Faux Columns einsetzen.

5

So hab die Websitestruktur von dir nachgebildet. So müsste alles passen, musst aber proportional und farblich halt anpassen:

[HTML]

Unterschiedliche Div-Längen body { margin: 0; padding: 0; width: 100%; height: 100%; background: e0e0e0; }

#container {
width: 500px;
margin: 10px auto;
border: 1px solid black;
}

#header {
height: 40px;
background: gray;
}

#right {
width: 100px;
float: left;
background: red;
height: 100px;
display: inline;
}

#content {
width: 400px;
float: left;
background: green;
height: 100px;
display: inline;
}

#footer {
clear: both;
height: 50px;
background: yellow;
}

header
Content
Navi
Footer
[/HTML]
6

Hallo.

Das beseitigt zwar nicht deinen Fehler, aber ich wollte nur mal kurz sagen das deine Seite keinen hat.

Gruss
Elroy