Problem mit Float-Layout

BabbleBoy · #1 (**permalink**) 04.05.2006, 08:52

Hallo!

Ich habe ein Layout, bei dem der Hauptbereich "main" vertikal in beliebig viele Abschnitte unterteilt werden kann. Jeder Abschnitt wiederum besteht aus einer linken und einer rechten Spalte ("mainparaleft" und "mainpararight").

Mit dem IE6 sieht das ganze wie gewünscht aus:

http://software.ximes.com/temp/css0604/basic.htm
http://software.ximes.com/temp/css0604/css/basic.css

Der Firefox 1.5 hingegen schiebt den Text in "mainpararight" zu weit nach unten. Könnt ihr mir da eventuell weiterhelfen? Warum ist das so? Bzw. wie kann ich das umgehen?

Vielen Dank schon mal im voraus!!

Code:

...
<style type="text/css">
body, html {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 11px;
  color: #4A2500;
  background-color: #EAE8D0;
  margin: 0px;
  padding: 0px;
}
body {
  min-width: 750px;
}
#wrap {
  background: #EAE8D0;
  margin: 40px auto auto auto;
  width: 750px;
  height: 500px;
}
#main {
  background: #FFFFFF;
  float: left;
  width: 500px;
  height: 500px;
}
.mainparaleft {
  text-align: right;
  padding: 20px 10px 20px 20px;
  float: left;
  width: 120px;
}
.mainparaleft ul {
  margin: 0px;
  padding: 0px;
  list-style:none;
}
.mainparaleft ul a {
  color: #4A2500;
}
.mainparaleft li{
  margin: 0px;
  padding: 0;
}
.mainpararight {
  padding: 20px 20px 20px 10px;
  width: 320px;
  float: right;
}
.mainparabottomborder {
  clear:both;
  border-bottom: 1px solid #EAE8D0;
}
.mainparabottom {
  clear:both;
}
#sidebar {
  font-size: 11px;
  color: #000000;
  background: #FFFFFF;
  float: right;
  width: 249px;
  height: 500px;
}
#sidebarcont {
  color: #FFFFFF;
  background: #625751;
  margin: 10px;
  padding: 10px;
  height: 460px;
}
</style>
...
<body>
<div id="wrap">
  <div id="main">
    <div class="mainparaleft">
      <ul>[*]Lorem[*]Consectetuer[*]Gravida[*]Tristique[/list]    </div>
    <div class="mainpararight">
      

abc...</p>
    </div>
    <div class="mainparabottomborder"></div>
    <div id="sidebar">
      <div id="sidebarcont">
        

abc...</p>
      </div>
    </div>
  </div>
</div>
</body>
...

LG,
J.

Edit: Hab jetzt noch meinen Tippfehler ("margin-left: right") korrigiert...

alexo · #2 (**permalink**) 04.05.2006, 09:35

nur so eine frage: was willst du mit margin-left: right; erreichen?!?!?!?

BabbleBoy · #3 (**permalink**) 04.05.2006, 09:38

@alexo: T'schuldige, da ist wohl etwas durcheinandergeraten...

Es sollte natürlich heissen:

Code:

.mainpararight {
  padding: 20px 20px 20px 10px;
  width: 320px;
  float: right;
}

alexo · #4 (**permalink**) 04.05.2006, 09:49

kein problem

!

noch was: dein wrap-<div> ist nicht geschlossen

!

BabbleBoy · #5 (**permalink**) 04.05.2006, 10:06

Hmmm, ich sollte mir wohl das Sprichwort "Eile mit Weile" zu Herzen nehmen...

Aber im Ernst: Ist es evtl. nicht empfehlenswert, in ein "fließendes" Div ein weiteres "fließendes" Div einzubetten? Oder wie kann ich sonst im Hauptbereich zwei nebeneinander positionierte Bereiche schaffen??

Für einen Tipp wäre ich seeeehr dankbar!

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS von Plugin beisst!	expand	CSS	0	28.09.2012 17:44
div überlappen, Layout aufbau Problem!	Basti82	CSS	2	08.09.2008 10:56
Float / Container Problem - Total seltsam.	einfachder	CSS	9	16.07.2008 12:05
Problem mit 3 Spaltigem Layout	stipo	CSS	0	27.05.2006 20:58
Float Layout Problem, Internet Explorer	Azzy	CSS	13	23.12.2005 16:19