css problem mit min-height

[mastermo]

Hallöchen Leute,

ich hab nen Problem mit min-height und steige einfach nicht durch wo die Fehlerursache steckt :/

Der Container soll sich eigentlich automatisch verlängern, aber so wie´s grade ist geht der Content ungehindert über den Container hinaus und überlappt den Containerboden und Footer :/

Kann mir wer von euch sagen woran das liegen könnte?

Die Seite worum es geht ist

Mein CSS Code:

::selection {background: #0B75AF; color: #fff;}
::-moz-selection {background: #0B75AF; color: #fff;}

/* VORRÜBERGEHEND! WIRD DURCH CLASS ERSETZT!!! */
a.menu:link    { color:#00f; background-color:transparent; text-decoration: none; }
a.menu:visited { color:#00f; background-color:transparent; text-decoration: none; }
a.menu:hover   { color:#ff0; background-color:#00f; text-decoration: none; }
a.menu:active  { color:#ff0; background-color:#a03; text-decoration: none; }
/* VORRÜBERGEHEND! */

body {background:url( ../img/background/background.jpg) center no-repeat #111; font-size: 14px; font-family: Arial; color: #fff;}

/* HEAD NAVIGATION START */
#headnavi {margin: auto; height: 30px; border-bottom: 1px solid #0B75AF; background: rgba(11,11,11, 0.7); font-size: 12px; color: #fff;}
.headnavi {margin: auto; width: 1000px;}
.headnavi_left {float: left; line-height: 30px;}
.headnavi_country {margin-right: 2px;}
.headnavi_right {float: right; line-height: 30px;}
.headnavi_service {padding-left: 5px; padding-right: 5px;}
/* HEAD NAVIGATION END */

/* TITLE START */
#title {margin: auto; width: 1000px; height: 150px; background:url( ../img/title.png);}
/* TITLE END */

/* CONTAINER START */
#container {margin: auto; width: 1000px; min-height: 750px; border: 1px solid #777; border-radius: 5px; background: rgba(11,11,11, 0.7);}
/* CONTAINER END */



 




/* NAVIGATION START */
.navigation
{float: left; margin-top: 25px; width: 200px; border-right: 1px solid #777;}

nav { width:200px; float:left; margin:25px; }
nav ul li { width:180px; height:20px; line-height:20px; vertical-align:central; padding:10px; font-family:Arial; font-size:14px; color:#fff; /*background: rgba(55,55,55, 1.0);*/ list-style:none; cursor:pointer; }
nav .subnav li { width:180px; height:20px; line-height:20px; vertical-align:central; padding:10px; /*background: rgba(55,55,55, 1.0);*/ cursor:pointer; }
nav .subnav li a { font-family:Arial; font-size:12px; color:#0B75AF; text-decoration:none; }
nav .subnav li:hover > a { font-weight:bold; }
/* NAVIGATION END */

/* SOCIALMEDIA START */
.socialmedia
{margin-top: 20px; float: left; width:180px; min-height: 100px; height:20px; line-height:20px; vertical-align:central; padding:10px; font-family:Arial; font-size:14px; color:#fff; /*background: rgba(55,55,55, 1.0);*/ list-style:none;}

/* SOCIALMEDIA END */

/* CONTENTS START */
.content
{float: right; width: 739px; min-height: 750px; margin: 12px 12px 25px 0px; padding: 15px;}
.contents { padding: 20px; padding-bottom: 45px; margin-bottom: 15px; /*background: rgba(55,55,55, 1.0);*/}
/* CONTENTS END */

/* FOOTER START */
#footer {height: 150px;}
/* FOOTER END */

Ich weiß es ist ein wenig unübersichtlich aber das wird im nachhinein noch überarbeitet Mir gehts in erster Linie darum erstmal das Problem zu lösen



Gruß und schonmal im Voraus ein kräftiges Danke für eure Hilfe

[devcode]

Gib deiner #container div keine style angaben. Mach dir eine neue div wo du nochmals die nav und den content zusammenfast und gibst ihm den style und floatest diese.

[mastermo]

Hmm irgendwie raff ichs glaube noch nicht ganz wie du das meinst. Im Container-Div sind ja nur die Maße, Hintergrundfarbe, Border und Margin auto fürs centern drin

Könntest du mir das wohl kurz aufschreiben, wie du das meinst? Also Meine style.css mit deinen Änderungen als [ Code ] ? Ich wäre dir sehr dankbar, wenn du das machen würdest

Habs grad alles verschachtelt.

Div Container start
Div Navi
Div Content
Div Container end

Gruß Mo & eine gute Nacht

[devcode]

Dein #container ist im moment ja der style von dem hintergrund, sprich border und background. Gib diesem nur ein margin: auto und eben die width. In dem #container machst du noch eine div die content und navi umfasst, und diesem gibst du den style.

<div id="container">
  <div class="wrap-content">
    <div class="navigation"></div>
    <div class="content"></div>
  </div><!-- wrap-content -->
</div><!-- container -->

In diesem beispiel gibst du dem .wrap-container ein float: left, und eben den background und border etc.