Div lässt sich nicht formatiert werden - wieso ?

HTML 4 YOU · 25 April 2010

3 Spalten Layout mit (auto) div erweiterung

Hey Leute habe eine Frage und zwar weiß ich nicht, wie man ein 3 Spalten Layout machen kann, ohne das sich die Seite nicht erweitert.

Weiß jemand eine Lösung ?

hier ein Bild:

http://img710.imageshack.us/img710/8213/picture0001s.png

und hier der Quelltext+CSS Code

HTML:

<!DOCTYPE HTML>

<html>

    <head>

        <title>m-remy.de - Startseite</title>

        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

        <link rel="stylesheet" type="text/css" href="../styles/Style.css" media="all" />

        <!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="../styles/Style_lte_IE_7.css" media="all" /><![endif]-->


    </head>


    <body>


    <div id="header">

    </div>


    <div id="page">


    <div id="sidebar">


        <img src="../images/Logo.png" alt="m-remy.de" id="m-remy" />



        <ul id="nav-bar">
            <li><a href="#">Startseite</a></li>
            <li id="untermenu"><a href="#">Schwebebahnr&auml;tsel</a>
                <ul>
                    <li><a href="#">Aktuelles</a></li>
                    <li><a href="#">Gewinner</a></li>
                </ul>
            </li>
            <li id="untermenu"><a href="#">Hobbys</a>
                <ul>
                    <li><a href="#">Alpha</a></li>
                    <li><a href="#">Beta</a></li>
                    <li><a href="#">Gamma</a></li>
                </ul>
            </li>
            <li><a href="#">Beruf</a></li>
        </ul>



    </div>



    <div id="content">

           <h3>Hallo und herzlich Willkommen auf meiner Homepage !!</h3>

           <p class="eins">
           Hallo auf meiner neuen Homepage ! Ich habe sie jetzt neu &uuml;berarbeitet, hoffe sie gef&auml;llt euch ! agshfadf asdf adf adf ad fas fas fas fas fas fas fas as fas fafd fafd asd fad fagfd asdfkaj fkajsgfhja gjhag dskja hgkjha hjfhjfagf kjasfhja hjfgd ahjs fjha fhja hjfgfa gfash fasgfhkasfghjkfghjujafsfha jfhkja gfjhagfhgasdhjfgakjgsj fhags gfjsdikjfa dhjf gakjhsgfk ahjdg fkjhagsdh gfasjgfjahgfhj fhjg fkajsh gfjahdsjhgkjahgdfh gasjhgf AGD gfd hjFDSF SAHF AHGFAGFDJ ghas gfakjgdfkj ahs dfkjhagfdkjhahjgahjs fkajhgf hjafgfj gadskjahgfjh agfhj gashj gfjha fhjgagf jash gfjahs gfjhagfdh ags fgjahsgf jhags fjhgasdfg ash gfkjahsgghfdjh4hfg a gfahj fhjags fjhadh gfashj fkhjas fkjagfd akjs f
           </p>

           <p class="zwei">

           nmbymnbvymnbvkjsdhgszhgslkzhg sjdgl kjsdlgkj shzh lgkk sjh sj gjk gkj hsdh glk hkjf kjsh kjhshgl sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg sj gjk gkj hsdh glk hkjf kjsh kjhshg

           </p>




    </div>

    </div>
    </body>


</html>

Hier der CSS-Code:

Code:

body {
background: url(../images/background.jpg);
margin: 0px;
padding: 0px;
padding-bottom: 20px;
padding-top: 20px;
}



/********************Layout******************/

#header {
margin: 0px auto;
margin-top: 10px;
width: 900px;
height: 158px;
background: url(../images/header.png) no-repeat;
}


#page {
margin: 0px auto;
margin-top: 10px;
padding-top: 20px;
padding-bottom: 20px;
background: #d7d7d7;
width: 900px;
min-height: 450px;
height: auto;
border: 0px solid;


border-radius: 15px;                                       /* CSS3 */
-webkit-border-radius: 15px;                               /* Safari, Chrome */
-khtml-border-radius: 15px;                                /* Konqueror */
-moz-border-radius: 15px;                                  /* Firefox */
}


#sidebar {
margin-left: 20px;
margin-top: 50px;
width: 300px;
float: left;
}


#m-remy {
margin-bottom: 20px;
}


#nav-bar {
margin-bottom: 60px;
list-style-type: none;
}


#content {
margin-top: 30px;
margin-bottom: 40px;
margin-left: 280px;
width: 600px;
height: auto;
}

/********************************************/






/********************Menü********************/



/**Formatierung**/


#nav-bar li {
list-style: none;
width: 150px;
height: auto;
}

#nav-bar a {
height: auto;
width: auto;
margin-bottom: 1px;
color: #000;
font-family: Arial;
font-size: 11pt;
text-decoration: none;
}




/**Pfeile**/



#nav-bar li a:before {                                          /*Pfeil nach rechts vor jeden Menüpunkt*/
content: url(../images/Pfeil_rechts.png);
padding-right: 5px;
}


#nav-bar li:hover a:before {                                    /*Pfeil nach rechts dunkel beim mouseover*/
content: url(../images/Pfeil_rechts_dunkel.png);
padding-right: 5px;
}


#nav-bar #untermenu:hover a:before {                            /*Pfeil nach unten dukel vor jedem Menüpunkt mit Untermenüs*/
content: url(../images/Pfeil_unten_dunkel.png);
padding-right: 5px;
}


#nav-bar #untermenu:hover ul li a:before {                      /*Pfeil nach rechts vor jedem Menüpunkt im Untermenü*/
content: url(../images/Pfeil_rechts.png);
padding-right: 5px;
}


#nav-bar #untermenu:hover ul li:hover a:before {                /*Pfeil nach rechts dunkel beim mouseover*/
content: url(../images/Pfeil_rechts_dunkel.png);
padding-right: 5px;
}




/**Drop-down Effekt**/


#nav-bar #untermenu ul {
display: none;
}


#nav-bar #untermenu:hover ul {
display: block;
}





/**Sonstiges**/


#nav-bar li:hover a {                                    /*Link weiß beim mouseover*/
color: #fff;
}


#nav-bar #untermenu:hover ul li a {                      /*Links im Untermenü schwarz beim mouseover vom Obermenü*/
color: #000;
}


#nav-bar #untermenu:hover ul li:hover a {                /*Links im Untermenü weiß beim mouseover*/
color: #fff;
}

/********************************************/





/*******************Inhalt*******************/

/**Überschriften**/
#content h3 {
border: 1px solid #fff;
text-align: center;


border-radius: 5px;                                       /* CSS3 */
-webkit-border-radius: 5px;                               /* Safari, Chrome */
-khtml-border-radius: 5px;                                /* Konqueror */
-moz-border-radius: 5px;                                  /* Firefox */
}



/**Absätze**/


#content p.eins {
width: 220px;
margin-left: 50px;
text-align: justify;
height: auto;

}



#content p.zwei {
width: 220px;
height: auto;

margin-top: -440px;
text-align: justify;
float: right;
}

/********************************************/

_Thor_ · 25 April 2010

Hast du es mal mit der Eigenschaft float versucht?

HTML 4 YOU · 25 April 2010

hab ich doch:

Code:

#sidebar {
margin-left: 20px;
margin-top: 50px;
width: 300px;
float: left;
}

und

Code:

/**Absätze**/


#content p.eins {
width: 220px;
margin-left: 50px;
text-align: justify;
height: auto;

}



#content p.zwei {
width: 220px;
height: auto;

margin-top: -440px;
text-align: justify;
float: right;
}

/********************************************/

vitus37 · 25 April 2010

Versuche mal p.eins und p.zwei ein float:left; zu geben, also so dass alle drei Spalten links gefloatet sind. So mache ich es immer...

HTML 4 YOU · 25 April 2010

hab ich grad verscuht, aber leider erweiter sich dann die seite nicht mehr :(

vitus37 · 25 April 2010

Dann gib page noch ein overflow: hidden;

LG

HTML 4 YOU · 25 April 2010

ja, aber ich will ja, dass sich die Seite weiter erweitert, da bringt es mir nicht, wenn ich den "overflow" verstecke ;)

neuroleptika · 25 April 2010

Je nach dem was in Style_lte_IE_7.css steht kann overflow: hidden; die Inhalte (im IE<7) auch ganz abschneiden.
Linktipp: Vier Methoden zum Einschließen von Floats - Little Boxes

Edit:
@ HTML 4 YOU
Deinen letzten Beitrag habe ich nicht gelesen.
EasyClearing für #page währe eine Möglichkeit.

HTML 4 YOU · 25 April 2010

rede ich so undeutlich ?

Ich möchte gerne, dass die Seite auch im 3-Spalten-Layout sich automatisch erweitert, NICHT dass die überlappenden Inhalte in irgendeinem Browser sich verstecken, abschneiden oder sonstiges. Es soll erst gar nicht zu überlappenden Inhalten kommen.

Hat mich jetzt jemand verstanden ?

neuroleptika · 25 April 2010

HTML 4 YOU schrieb:
rede ich so undeutlich ?

Mein Einwand zu overflow:hidden; galt vitus37.
vitus37 hat dier eine Methode zum Einschließen der floats genannt. Ohne Angaben zu Height funktioniert das in den meißten Fällen auch ohne das etwas abgeschnitten wird.

Du mußt die floats einschließen damit die Box drumherum mitwächst.

HTML 4 YOU · 25 April 2010

achso sry,

naja, hab es jetzt hinbekommen, nur dem IE muss ich nochmal nachhelfen,

Danke an alle

Div lässt sich nicht formatiert werden - wieso ?

HTML 4 YOU

Neues Mitglied

_Thor_

Aktives Mitglied

HTML 4 YOU

Neues Mitglied

vitus37

Senior HTML'ler

HTML 4 YOU

Neues Mitglied

vitus37

Senior HTML'ler

HTML 4 YOU

Neues Mitglied

neuroleptika

Aktives Mitglied

HTML 4 YOU

Neues Mitglied

neuroleptika

Aktives Mitglied

HTML 4 YOU

Neues Mitglied

Neueste Beiträge