Christoph: Haupt div enthält 2 Div boxen nebeneinander.

Hi.

Ich habe eine Frage zu CSS und Div boxen.

Ich habe eine Seite zusammengestellt, dass mehrere Spalten enthält. einen Header, einen Contentbereich und einen Footbereich. der Contentbereich enthält 2 Div elemente, einmal links und einmal rechts. der container für die beiden boxen soll entsprechend der länge der beiden conten divs mitwachsen. in IE funktioniert das auch, in Firefox nicht. Was mache ich falsch?

Hier mein Beispeil:

  
  
<body>  
    <!--Content Start-->  
  
	<div id="content">  
			  
            <!--Head Start-->  
      <div id="header"></div>  
  
        	<!--Head End-->  
  
            <!--maincontent Start-->  
  
            <div id="maincontent">  
  
            	  
            	<div id="leftcontent">  
  
                	  
            	</div>  
  
                <div id="rightcontent">  
  
                	<div id="mininews1">  
                  	<div id="boxkopf"></div>  
                        <div id="boxinhalt"></div>  
                        </div>  
  
                </div>  
            </div>  
  
 </div>  
  
            <!--maincontent end-->  
  
                <!--foot Start-->  
            <div id="footer">  
  
      		</div>  
  
            <!--foot end-->  
  
    </div>  
	<!--Content End-->  
</body>  
  

hier meine css datei dazu:

  
  
body {  
	font-family: Georgia, "Times New Roman", Times, serif;  
	background-color: #FFF2D5;  
}  
  
#header {  
	background-image: url(file:///Z|/kurier/web/new/Bilder/header.jpg);  
	background-repeat: no-repeat;  
	background-position: center center;  
	height: 156px;  
	width: 950px;  
	margin-top: 0px;  
	margin-right: auto;  
	margin-bottom: 0px;  
	margin-left: auto;  
}  
  
#content {  
	width: 950px;  
	margin: 0 auto;  
}  
  
#rightcontent{  
	font-family: Georgia, "Times New Roman", Times, serif;  
	height: 600px;  
	width: 200px;  
	padding-top: 50px;  
	float: right;  
	}  
	  
  
#maincontent {  
	width: 906px;  
	background-color: #FFFBE6;  
	border: 1px solid #A50B27;  
	margin-top: 0;  
	margin-right: auto;  
	margin-bottom: 0;  
	margin-left: auto;  
}  
  
#leftcontent {  
	width: 500px;  
	padding-right: 20px;  
	padding-left: 50px;  
	padding-top: 20px;  
	padding-bottom: 20px;  
	height: auto;  
	float: left;  
}  
  
  

Vielen Dank,
christoph.

  1. Hi!

    Auch Du hast ein standard Problem. Du http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=floatest, um die beiden Boxen nebeneinander zu bekommen. Damit nimmst Du die Elemente aus dem Fluss. Der IE ist im Prinzip ein kapuuter Browser oder auch (k)ein Browser. Deshalb zeigt er Die Seite falsch an.

    Kurz. Durch das Floaten ist das Elternelement leer und entsprechend klein. Ein Clear koennte Abhilfe schaffen.

  2. Hi.

    Ich habe eine Frage zu CSS und Div boxen.

    Ich habe eine Seite zusammengestellt, dass mehrere Spalten enthält. einen Header, einen Contentbereich und einen Footbereich. der Contentbereich enthält 2 Div elemente, einmal links und einmal rechts. der container für die beiden boxen soll entsprechend der länge der beiden conten divs mitwachsen. in IE funktioniert das auch, in Firefox nicht. Was mache ich falsch?

    In solchen Fällen ist es imho wenig sinnvoll_beide_Boxen zu floaten.
    Dein Stichwort lautet "Block Formatting Context"!

    Der Artikel Grundlagen für Spaltenlayout mit CSS im Weblog dürfte dich interessieren.

    Gruß Gunther