✔ Mehrere Divs nebeneinander

Devil86Hh · 9. Dezember 2005

Moin Moin ich hab folgendes Problem ich will 2 Divs nebeneinander in 1 Div packen das Problem ist sobald ich 2 Divs einfüge dann zeigt er das eine richtig an und das andere das hackt er nach unten ab.
Um euch das zu verdeutlichen hier schonmal der Link:HIER

Meine CSS sieht der zeit so aus:

Code:

body {
font-size:10px;
font-family:Verdana,;
text-align:left;
margin:0px;
padding:0px;
background-image:url(bg.gif);
background-color:#A1A1A1;
}

#box {
width:644px;
overflow:visible;
min-height:705px;
overflow:visible;
margin:0px auto;
text-align:left;
border:1px solid #797979;
background-color:white;
}

#box2 {
width:634px;
overflow:visible;
min-height:696px;
margin-left:4px;
margin-right:4px;
margin-bottom:3px;
margin-top:3px;
text-align:left;
border:1px solid #797979;
background-color:white;
}

#kopf {
background-image:url(head.jpg);
background-color:orange;
padding:0px;
width:634px;
height:122px;
margin:0px;
}

#navilinks {
background-color:transparent;
padding:0px;
width:164px;
height:122px;
float:left;
}

#green {
background-image:url(greennavi.jpg);
background-repeat:no-repeat;
background-color:#7CBD00;
width:163px;
height:154px;
margin-left:0px;
margin-top:0px;
position:absolut;

}

#n{
font-size:10px;
font-family:Verdana;
font-weight:700;
text-align:left;
color:white;
margin-top:10px;
margin-left:55px;
}
#work {
background-image:url(work.jpg);
background-repeat:no-repeat;
background-color:#CFCECF;
margin-top:10px;
margin-left:1px;
width:159px;
height:119px;
float:left;
border:1px solid #7A7A7A;
}

#tut {
background-image:url(tut.jpg);
background-repeat:no-repeat;
background-color:#CFCECF;
margin-top:10px;
margin-left:1px;
width:159px;
height:119px;
float:left;
border:1px solid #7A7A7A;
}

#login {
background-image:url(login.jpg);
background-repeat:no-repeat;
background-color:#CFCECF;
margin-top:10px;
margin-left:1px;
width:159px;
height:119px;
float:left;
border:1px solid #7A7A7A;
}
#box3 {
width:468px;
overflow:visible;
min-height:571px;
margin-left:166px;
margin-right:0px;
margin-bottom:0px;
padding:0px;
text-align:left;<br />
float:center;
background-color:#E6E6E6;
}

Und der HTML Code sieht so aus:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" title="Standard" media="screen, projection" href="screen.css" type="text/css" />
</head>
<body>

<div id="box">
              <div id="box2">
							<div id="kopf"></div>
							<div id="green"></div>
							<div id="box3">
							Test Test Test Test<br /><br />Test Test Test 
							</div></div>				
</div>
</body>
</html>
</html>

Das Problem trifft sowohl im Firefox als auch im IE auf und ich finde den Fehler einfach nicht bin auch noch Anfänger in sachen CSS.
Sitze schon knapp 2 Tage dran und verzweifel so langsam würde mich freuen wenn mir einer von euch helfen könnte.

Maik · 9. Dezember 2005

Weise der #box3 die CSS-Eigenschaft float:right zu.

Devil86Hh · 9. Dezember 2005

Wenn ich der Box 3 Float:right zuweise und anschließend mehr text schreibe dann geht box 3 komischerweise über die Box 2 hinaus!

Maik · 9. Dezember 2005

Mein Lösungsvorschlag, basierend auf der CSS-Datei style.css:

Browsercheck: FF 1.5, IE 6.0, MOZ 1.6, NN 7.0, OP 8.50

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
body {
font-size: 10px;
font-family: verdana;
text-align: left;
margin: 0;
padding: 0;
background-image: url(bg.gif);
background-color: #a1a1a1;
}

div#mainBox 
{
width: 644px;
min-height: 705px;
overflow: visible;
margin: 0px auto;
text-align: left;
border: 1px solid #797979;
background-color: white;
}

div#innerBox
{
width: 634px;
overflow: visible;
min-height: 696px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 3px;
margin-top: 3px;
text-align: left;
border: 1px solid #797979;
background-color: white;
}

div#headBox
{
background-image: url(head.jpg);
background-color: orange;
padding: 0px;
width: 634px;
height: 122px;
margin: 0;
}

div#leftBox
{
background-image: url(greennavi.jpg);
background-repeat: no-repeat;
background-color: #7cbd00;
width: 163px;
height: 154px;
margin-left: 0px;
margin-top: 0px;
float: left;
}

div#rightBox
{
width: 469px;
overflow: visible;
min-height: 571px;
margin: 0;
padding: 0px;
text-align: left;
float: right;
background-color: #e6e6e6;
}

div.clear
{
clear: both;
height: 0;
font-size: 0;
margin: 0;
padding: 0;
}

/* */

#navilinks {
background-color:transparent;
padding:0px;
width:164px;
height:122px;
float:left;
}

#n{
font-size:10px;
font-family:Verdana;
font-weight:700;
text-align:left;
color:white;
margin-top:10px;
margin-left:55px;
}

#work {
background-image:url(work.jpg);
background-repeat:no-repeat;
background-color:#CFCECF;
margin-top:10px;
margin-left:1px;
width:159px;
height:119px;
float:left;
border:1px solid #7A7A7A;
}

#tut {
background-image:url(tut.jpg);
background-repeat:no-repeat;
background-color:#CFCECF;
margin-top:10px;
margin-left:1px;
width:159px;
height:119px;
float:left;
border:1px solid #7A7A7A;
}

#login {
background-image:url(login.jpg);
background-repeat:no-repeat;
background-color:#CFCECF;
margin-top:10px;
margin-left:1px;
width:159px;
height:119px;
float:left;
border:1px solid #7A7A7A;
}
-->
</style>

</head>
<body>

<div id="mainBox">
     <div id="innerBox">
          <div id="headBox"></div><!-- end headBox -->
          <div id="leftBox"></div><!-- end leftBox -->
          <div id="rightBox">
                     Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />
          </div><!-- end rightBox -->
          <div class="clear"></div>
          </div><!-- end innerBox -->
</div><!-- end mainBox -->
</body>
</html>

Devil86Hh · 12. Dezember 2005

Joa habs getestet funktioniert soweit ganz gut jedoch habe ich noch eine Frage wenn ich jetzt unter dem <div id="leftBox"> noch eine Box die etwas kleiner sein soll einfügen möchte dann setzt er sie rechts daneben, obwohl ich fast die gleichen Daten genommen hab wie bei div leftbox.
Die einzigste möglichkeit die ich sehe ist das div dann in div leftbox zu positionieren oder? Weil dadurch wird der Code dann leicht unübersichtlich. Damit ihr versteht was ich meine zeige ich euch mal wieder ein Bild: Link

Maik · 12. Dezember 2005

Hier das erweiterte und modifizierte CSS-Layout:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
body {
font-size: 10px;
font-family: verdana;
text-align: left;
margin: 0;
padding: 0;
background-image: url(bg.gif);
background-color: #a1a1a1;
}

div#mainBox
{
width: 644px;
min-height: 705px;
overflow: visible;
margin: 0px auto;
text-align: left;
border: 1px solid #797979;
background-color: white;
}

div#innerBox
{
width: 634px;
overflow: visible;
min-height: 696px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 3px;
margin-top: 3px;
text-align: left;
border: 1px solid #797979;
background-color: white;
}

div#headBox
{
background-image: url(head.jpg);
background-color: orange;
padding: 0px;
width: 634px;
height: 122px;
margin: 0;
}

div#leftBox
{
float: left;
}

div#naviBox
{
background-image: url(greennavi.jpg);
background-repeat: no-repeat;
background-color: #7cbd00;
width: 163px;
height: 154px;
margin-left: 0px;
margin-top: 0px;
}

div#subBox
{
width: 163px;
height: 120px;
background: #dfdfdf;
margin-top: 10px;
}

div#rightBox
{
width: 469px;
overflow: visible;
min-height: 571px;
margin: 0;
padding: 0px;
text-align: left;
float: right;
background-color: #e6e6e6;
}

div.clear
{
clear: both;
height: 0;
font-size: 0;
margin: 0;
padding: 0;
}

/* */

#navilinks {
background-color:transparent;
padding:0px;
width:164px;
height:122px;
float:left;
}

#n{
font-size:10px;
font-family:Verdana;
font-weight:700;
text-align:left;
color:white;
margin-top:10px;
margin-left:55px;
}

#work {
background-image:url(work.jpg);
background-repeat:no-repeat;
background-color:#CFCECF;
margin-top:10px;
margin-left:1px;
width:159px;
height:119px;
float:left;
border:1px solid #7A7A7A;
}

#tut {
background-image:url(tut.jpg);
background-repeat:no-repeat;
background-color:#CFCECF;
margin-top:10px;
margin-left:1px;
width:159px;
height:119px;
float:left;
border:1px solid #7A7A7A;
}

#login {
background-image:url(login.jpg);
background-repeat:no-repeat;
background-color:#CFCECF;
margin-top:10px;
margin-left:1px;
width:159px;
height:119px;
float:left;
border:1px solid #7A7A7A;
}
-->
</style>

</head>
<body>

<div id="mainBox">
     <div id="innerBox">
          <div id="headBox"></div><!-- end headBox -->
          <div id="leftBox">
               <div id="naviBox"></div><!-- end naviBox -->
               <div id="subBox">subBox</div><!-- end subBox -->
          </div><!-- end leftBox -->
          <div id="rightBox">
                     Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />
          </div><!-- end rightBox -->
          <div class="clear"></div>
          </div><!-- end innerBox -->
</div><!-- end mainBox -->

</body>
</html>

Devil86Hh · 13. Dezember 2005

Hmm verstehe jetzt nicht genau was Ich falsch gemacht habe aber nun ja es funktioniert ich danke dir!

Maik · 13. Dezember 2005

Du hast wohl für die zweite Box ebenfalls float:left bestimmt und die DIVs folgendermassen im Quelltext notiert:

HTML:

<div id="leftBox"></div>
<div id="zweite Box"></div>

womit die neue Box rechts neben der leftBox angeordnet wird, da für sie ja schon float:left bestimmt wurde. Das bedeutet, daß sie vom nachfolgenden Element (= zweite Box) rechts umflossen wird.

Devil86Hh · 13. Dezember 2005

Aha ok ok das hab ich soweit verstanden. Nur hab ich leider wieder mal ein Problem mit dem IE. Es freut mich das er jetzt im Div bleibt wenn ich viel Text habe aber sobald ich weniger Text habe kommt der gleiche Fehler

. Der Fehler kommt wie immer beim IE.
Firefox funktioniert soweit ganz gut.
Hab das ganze mal hochgeladen um es genauer zu verdeutlichen wie gesagt Fehler tritt zur zeit nur im IE auf. Hier der Link

Edit: Ach ja hier nochmal der Html und CSS Code.

HTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" title="Standard" media="screen, projection" href="style.css" type="text/css" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>
</head>
<body>

<div id="mainBox">
     <div id="innerBox">
          <div id="headBox">
							 <div id="headnavi"><img src="home.jpg" alt="Home" width="71px" height="34px" border="0" /><img src="newsm.jpg" alt="News" width="71px" height="34px" border="0" /><img src="about.jpg" alt="About Me" width="71px" height="34px" border="0" /><img src="referenz.jpg" alt="Referenzen" width="71px" height="34px" border="0" /></div><!--end headnavi-->
					</div><!-- end headBox -->
          <div id="leftBox">
               <div id="naviBox"></div><!-- end naviBox -->
               <div id="subBox">subBox</div><!-- end subBox -->
          		 <div id="subBox2">subBox</div><!-- end subBox -->
							 <div id="subBox3">subBox</div><!-- end subBox -->
							 <div id="copy">Copyright by Devil-Designs</div>
					</div><!-- end leftBox -->
          <div id="rightBox">
							 <div id="news" margin-left:"10px">
                     Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br /><br />Test Test Test Test<br />
          </div><!-- end news -->
					</div><!-- end rightBox -->
          <div class="clear"></div>
          </div><!-- end innerBox -->
</div><!-- end mainBox -->

</body>
</html>

und hier der CSS Code:

Code:

body {
font-size: 10px;
font-family: verdana;
text-align: left;
margin: 0;
padding: 0;
background-image: url(bg.gif);
background-color: #a1a1a1;
}

div#mainBox
{
width: 644px;
min-height: 705px;
overflow: visible;
margin: 0px auto;
text-align: left;
border: 1px solid #797979;
background-color: white;
}

div#innerBox
{
width: 634px;
overflow: visible;
min-height: 696px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 3px;
margin-top: 3px;
text-align: left;
border: 1px solid #797979;
background-color: white;
}

div#headBox
{
background-image: url(head.jpg);
background-color: orange;
padding: 0px;
width: 634px;
height: 122px;
margin: 0;
}

div#headnavi
{
background-color: transparent;
padding: 0px;
width: 284px;
height: 34px;
margin-top: 0px;
margin-left: 250px;
}

div#leftBox
{
float: left;
}

div#naviBox
{
background-image: url(greennavi.jpg);
background-repeat: no-repeat;
background-color: #7cbd00;
width: 163px;
height: 154px;
margin-left: 0px;
margin-top: 0px;
}

div#subBox
{
background-image:url(work.jpg);
background-repeat:no-repeat;
background-color:#CFCECF;
width: 159px;
height: 119px;
margin-top: 10px;
margin-left: 2px;
border:1px solid #7A7A7A;
}

div#subBox2
{
background-image:url(tut.jpg);
background-repeat:no-repeat;
background-color:#CFCECF;
width: 159px;
height: 119px;
margin-top: 10px;
margin-left: 2px;
border:1px solid #7A7A7A;
}

div#subBox3
{
background-image:url(login.jpg);
background-repeat:no-repeat;
width: 159px;
height: 119px;
margin-top: 10px;
margin-left: 2px;
border:1px solid #7A7A7A;
}

div#copy
{
margin-bottom:2px;
}

div#rightBox
{
width: 468px;
min-height:571px;
overflow: visible;
margin-top:2px;
margin-bottom:0px;
padding: 0px;
text-align: left;
float: right;
background-color: #e6e6e6;
border-left:1px solid #CDCDCF;
border-top:1px solid #CDCDCF;
}

div#news
{
background-image:url(news.jpg);
background-repeat:no-repeat;
width: 454px;
overflow: visible;
min-height: 100px;
margin-top:6px;
margin-bottom:6px;
margin-left:6px;
background-color: #F7F7F7;
border:1px solid #C3C3C3;
}

div.clear
{
clear: both;
height: 0;
font-size: 0;
margin: 0;
padding: 0;
}

pamax · 13. Dezember 2005

Hi,

also wenn ich mir die Seite im IE und Firefox anschaue, sehe ich kein
Unterschied.

pMx

✔ Mehrere Divs nebeneinander

Devil86Hh

Grünschnabel

Maik

Devil86Hh

Grünschnabel

Maik

Devil86Hh

Grünschnabel

Maik

Devil86Hh

Grünschnabel

Maik

Devil86Hh

Grünschnabel

pamax

Erfahrenes Mitglied

Neue Beiträge