• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

positionieren mit auto

T

theoretisch

Mitglied
Hallöchen,

ich habe ein kleines Problem.
Und zwar möchte/ muss ich eine Webseite machen mit Header, Section und Footer... das normale halt.
Ich möchte meine section in einen aside (links) und einen iframe (rechts) einteilen.
Die section soll also diese beiden Inhalte umfassen, und der footer soll unter der section liegen.
Die Höhe der sektion soll sich automatisch anpassen (height:auto; ).
Nur leider passt sich die Höhe nicht an d.h. der footer liegt unter meinem aside und dem iframe.
Wie kann ich es machen das sie die sektion automatisch an die Höhe des Inhaltes anpasst?
Geht das in diesem Falle nicht oder habe ich was übersehen?
Habe auch schon im Internet und hier im Forum geschaut.... habe aber nichts brauchbares gefunden.
Hier mal ein Ausschnitt meiner CSS, hoffe das reicht euch.

Code: 
section
    {
    border:1px solid black;
    margin:0 auto;
    background-image: url(../images/baer_berlin.png);
    background-repeat: no-repeat;
    background-position:center;
    width:718px;
    height:auto;
    padding-bottom:10px;
    }
    iframe
        {
        width:470px;
        height:550px;
        float:left;
        padding-left:8px;
        }
    aside
        {
        border:1px solid black;
        width:234px;
        height:550px;
        float:left;
        }
footer
    {
    background-image: url(../images/footer.jpg);
    background-repeat: no-repeat;
    margin:auto;
    width:718px;
    height: 65px;
    color:black;
    text-align:center;
    font-size:150%;
    padding-top:15px;
    }

vielen dank
theoretisch
 
Ist das nur so möglich? Also liegt es an dem das sich der footer nicht unten anschließt?
Gibt es keine Möglichkeit das mit iframe zu realisieren?
Da soll ein langer text rein... ohne den sähe das ziemlich doof aus... =D
habe auch schon versucht die section einfach weg zu lassen auf dieser seite... aber das hilft auch nicht leider.
 
Kopieren und Probieren
HTML: 
<!doctype html>
<html>
<head>
<title>Lenovo</title>
<meta charset="UTF-8">
<style>
* {
margin:0;
padding:0;
}

#wrapper {
margin:0 auto;
width:718px;
overflow:hidden;
background:#888;
}

header {
background:#09c;
color:#fff;
}

#spalte1 {
float:left;
width:234px;
background:#ade;
}

#spalte2 {
width:484px;
float:left;  
background:#aaa;
}  

footer {
clear:left;
background:#09c;
color:#fff;
}

h1 , p  {
padding:10px;
}

iframe {
margin:10px;
width:464px;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>Meine Webseite</h1>
</header>

<div id="spalte1">
<p>Spalte 1</p>
</div>

<div id="spalte2">
<article>
<p>Inhalt</p>
<iframe src=""></iframe><!-- Wenn nötig für Fremdinhalte-->
</article>
</div>

<footer>
<p>Footer</p>
</footer>

</div><!--/#wrapper-->
</body>
</html>
 
Zuletzt bearbeitet:
Sehr cool es geht! Danke.
Aber wiso ? Liegt das nur an des divs? Oder habe ich einen Fehler in der css.
Ich kann an der css garnicht so viele Unterschiede feststellen (bis auf das alles mit divs gemacht ist).
Kannst du mir das noch erklären bzw. weißt du den Fehler vielleicht ? =D

Ich habe es !
Es liegt daran das ich kein clear benutzt habe.
Deswegen schließt sich der Footer oben am head an.

nochmal vielen Dank für eure Hilfe alles klappt jetzt! =D
theoretisch
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben