CSS - Div soll sich automatisch an den Inhalt anpassen!

[Jimbim]

Hi Leute!

Eins vorweg, ich bin noch ein ziemlicher Anfänger in Sachen CSS und HTML. Viele Probleme, konnte ich schon durch bereits vorhandene Themen in diesem Forum lösen, doch dafür hab ich bis jetzt noch keine Lösung gefunden.

Folgendes: Ich hab ne Homepage gemacht, mit divs. Die Linke und die rechte Spalte passen sich schön der Größe des Inhalts an, weil ich den Inhalt direkt in die divs einfügen kann, es ändert sich nix.
Aber der Container in der Mitte, der Inhalt soll sich ständig ändern, wenn man auf einen Link aus der Menüleiste klickt.

Ich hab das Problem bis jetzt mit einem iFrame gelöst. Der passt sich aber nicht der Größe des Inhalts an, oder lieg ich da falsch. Versteht mich nicht falsch, aber ich will nicht bei jedem neuen Eintrag die Größe des iFrames ändern.

Auch mein div, dass ich als Hintergrund benutze (der gelbe, unter dem Header) passt sich nicht der Größe seines Inhalts an (funktioniert nur im IE). Wenn ich das richtig verstehe, liegt das daran, dass die drei container, mit "float: left;" die Spalten erzeugen.

Ich hoffe ich hab es verständlich rüber gebracht und ihr könnt mir helfen!

 

[cebito]

AW: CSS - Div soll sich automatisch an den Inhalt anpassen!

Quellcode (css) oder ein Link wär nicht schlecht. Wenn du deinem div keine feste Höhe gibst, wird er mit dem Inhalt mitwachsen bzw. schrumpfen...

 

[Tattoomaus78]

AW: CSS - Div soll sich automatisch an den Inhalt anpassen!

Link zur Seite?
Quelltext?

 

[Jimbim]

AW: CSS - Div soll sich automatisch an den Inhalt anpassen!

Der Link zur Seite:

Der CSS Code:

body {
background-image: url(../images/back.png)
}


#header {
background-image: url(../images/header.png);
width: 940px;
height: 126px;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
}


#navi {
width: 938px;
height: 20px;
margin-left: 1px;
margin-right: auto;
margin-top: 94px;
z-index: 100;
position: absolute;
}


#back {
background-color: #F2D973;
width: 918px;
height: auto;
padding: 10px;
margin-left: auto;
margin-right: auto;
min-height: 500px;
}


#links {
width: 150px;
height: auto;
min-height: 200px;
margin: 0px;
padding: 0px;
float: left;
}


#mitte {

width: 598px;
height: auto;
min-height: 200px;
margin-left: 10px;
padding: 0px;
float: left;
}

#rechts {
width: 150px;
height: auto;
min-height: 200px;
margin-left: 10px;
padding: 0px;
float: left;
}

.box {
background-image: url(../images/box_header.png);
background-repeat: no-repeat;
border: 1px solid;
border-color: #000000;
width: 138px;
height: auto;
min-height: 100px;
margin-bottom: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: justify;
padding: 25px 5px 5px 5px;
}

.box_header {

width: 138px;
height: auto;
margin: -23px auto 0px auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
color: #FFFF99;
position: absolute;
}

.mainbox {
background-image: url(../images/box_header_m.png);
background-repeat: no-repeat;
border: 1px solid;
border-color: #000000;
width: 586px;
height: auto;
min-height: 100px;
margin: 0px 0px 10px 0px;
padding: 25px 5px 5px 5px;
}

 

[sokie]

AW: CSS - Div soll sich automatisch an den Inhalt anpassen!

nach dem schliessen des rechten bereichs ein <div style="clear:both;"></div> würde schonmal dafür sorgen, dass der Browser weiss, wann das floaten zuende ist, und den Hintergrund entsprechend anzeigen lassen.
die inhalte sind auf der Beispielseite immer noch in einem iframe.

 

[Jimbim]

AW: CSS - Div soll sich automatisch an den Inhalt anpassen!

Super, des mit dem Hintergrund funktioniert. Danke schon mal.

Auf der Beispielseite ist der Inhalt in der Mitte in einem iFrame, stimmt. So soll es vom Prinzip her auch funktionieren. Die Links HOME, SPONSOREN, IMPRESSUM und KONTAKT funktionieren, so soll es am Ende ausschauen. Nur ohne iFrame, oder gibt es eine Möglichkeit, dass sich der iFrame seinem Inhalt anpasst?

 

[Herr_D]

AW: CSS - Div soll sich automatisch an den Inhalt anpassen!

Frame an Inhalt geht nur per Javascript...


du kannst aber, wenn du deine Sachen statt iframe zu nutzen includest, dem Bereich Höhen zuordnen, die sich automatisch verlängern...


Beispiel

#mitte {

width: 598px;
min-height:200px;
height:auto !important;  /* für moderne Browser */
height:200px;  /*für den IE */
margin-left: 10px;
padding: 0px;
float: left;
}

mainbox müßtest du noch anpassen... da könnte die Höhe aber im Prinzip raus...

Im Quelltext

<div id="mitte">

<div class="mainbox">
<?PHP
include("f_index.html");
?>
</div>

</div>

wobei du die f_index.html anpassen mußt (nur der Inhalt des body darf da stehen...)

 

[Jimbim]

AW: CSS - Div soll sich automatisch an den Inhalt anpassen!

Habs gelöst. Den iframe hab ich mit Java-Script dran bekommen. Danke für eure Hilfe!