zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Inhalt von float: right wird in Firefox unten angerechnet

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.09.2005, 16:02
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.06.2004
Beiträge: 36
Sukkulent befindet sich auf einem aufstrebenden Ast
Standard Inhalt von float: right wird in Firefox unten angerechnet

Hallo,

ich habe folgendes Konstrukt:
Eine Seite mit einer festen Breit die zentriert im Browserfenster steht. Es gibt einen Kopfbereich, der aus dem Logo, der Navigation und einem Bild besteht - alles schön nacheinander. Anschließend kommt der Content-Bereich. Dieser besteht aus einem Div (overflow: hidden), welches zwei weitere Div's enthält. Das erste der beiden inneren Div's ist float: left, das zweite Div float: right. Beide haben eine feste Breite und passen in die Gesamtbreite. Nun ist es so, das im IE6 alles korrekt angezeigt wird. Die Webseite schließt mit der letzten Textzeile im Content-Bereich ab.

Firefox macht folgendes:
Hier wird der Inhalt der zweiten Div-Box (float: right) zum Inhalt der ersten Box (float: left) in der Höhe hinzuaddiert. So das die Webseite unten nicht korrekt abschließt. Geb' ich in der zweiten Box (float: right) mehr Text ein, so wird der Abstand unter der zweiten Box auch größer.
Was mache ich hier nur falsch? Wieso will Firefox das nicht korrekt machen?

Bin für jede Hilfe dankbar.
Gruß
Sukkulent
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.09.2005, 16:14
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

http://www.xhtmlforum.de/viewtopic.php?t=1399
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.09.2005, 16:27
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.06.2004
Beiträge: 36
Sukkulent befindet sich auf einem aufstrebenden Ast
Standard

Ok Ulle,

war halt ein Versuch, vielleicht hätte es ja jemand auf anhieb verstanden.

Hier mein Code:
Code:
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<style type="text/css">

body {
background-color: #a6a79b;
font-family: arial, sans-serif;
font-size: 12px;
text-align: center;
}

* {
margin: 0px;
padding: 0px;
}

#basic-box {
position: relative;
margin: 13px auto;
width: 794px;
background-color: red;
}

#bodycontent {
margin-left: 18px;
width: 686px;
padding: 10px 36px 0px 36px;
background-color: red;
text-align: left;
color: #666;
overflow: hidden;/*sonst wird die Basic-Box nach unten nicht aufgezogen*/
background-color: white;
}
*html #bodycontent {/*fuer IE*/
margin-left: 0px;
}

#maincontent {
width: 415px;
float: left;
line-height: 20px;
background-color: silver;
}

#rightcontent {
float: right;
width: 236px;
background-color: silver;
}

</style>
</head>
<body>

 <div id="basic-box">
  
  <div id="bodycontent">
   <div id="maincontent">
    <div id="content">Hier entsteht der Inhalt der Seite. Ob ein-, zwei- oder dreispaltig! Hier entsteht der Inhalt der Seite. Ob ein-, zwei- oder dreispaltig! Hier entsteht der Inhalt der Seite. Ob ein-, zwei- oder dreispaltig! Hier entsteht der Inhalt der Seite. Ob ein-, zwei- oder dreispaltig! Hier entsteht der Inhalt der Seite. Ob ein-, zwei- oder dreispaltig! Hier entsteht der Inhalt der Seite. Ob ein-, zwei- oder dreispaltig! Hier entsteht der Inhalt der Seite. Ob ein-, zwei- oder dreispaltig! Hier entsteht der Inhalt der Seite. Ob ein-, zwei- oder dreispaltig! Hier entsteht der Inhalt der Seite. Ob ein-, zwei- oder dreispaltig! Hier entsteht der Inhalt der Seite. Ob ein-, zwei- oder dreispalti g! Hier entsteht der Inhalt der Seite. Ob ein-, zwei- oder dreispaltig! Hier entsteht der Inhalt der Seite. Ob ein-, zwei- oder dreispaltig!Hier entsteht der Inhalt der Seite. Ob ein-, zwei- oder dreispaltig! Hier entsteht der Inhalt der Seite. Ob ein-, zwei- oder dreispaltig!
	 </div>
	 <div id="service-nav">Hier entsteht die Service Navigation</div>
	</div> 
   <div id="rightcontent">Hier entsteht der Inhalt der Seite. Ob ein-, zwei- oder dreispaltig! steht der Inhalt der Seite. O steht der Inhalt der Seite. O</div>
  </div>
  
  
 </div>

</body>
</html>
Gruß Sukkulent
Mit Zitat antworten
  #4 (permalink)  
Alt 16.09.2005, 17:04
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
bodycontent {
margin-left: 18px;
width: 686px;
padding: 10px 36px 0px 36px;
background-color: red;
text-align: left;
color: #666;
overflow: hidden;/*sonst wird die Basic-Box nach unten nicht aufgezogen*/
background-color: white;
}
gelöscht!!

eingefügt:
Code:
.containing-float:after 
			{
			/* Inhalt pseudo-Element :after;
			 * somit [clear] moeglich	
			 */
			content: ".";
			 
			/* [content] verbergen;
			 */
			visibility: hidden;			
			height:     0;

			/* Block-Level fuer [clear];
			 */
			display: block;
			
			/* [float] clearing;
			 * einbeziehen der Float-Container;
			 */	
			clear: both; 
			}
Code:
  <div id="bodycontent" class="containing-float">
Ist es jetzt Okay?
Thread Klasse containg-float
__________________
</ulle>
Mit Zitat antworten
  #5 (permalink)  
Alt 16.09.2005, 22:50
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.06.2004
Beiträge: 36
Sukkulent befindet sich auf einem aufstrebenden Ast
Standard

Alles ist Gut!
Vielen, vielen Dank für Deine kompetente Hilfe.

Mein Problem ist nur, das ich die CSS-Angaben noch nicht so richtig kapiere. Wenn Du vielleicht Lust und Zeit hast, kannst Du mir's mal erkären.

Kennst Du Seiten, die sich mit CSS beschäftigen und die einem Technicken vermitteln?

Gruß
Sukkulent
Mit Zitat antworten
  #6 (permalink)  
Alt 16.09.2005, 23:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
lles ist Gut!
Vielen, vielen Dank für Deine kompetente Hilfe.

Mein Problem ist nur, das ich die CSS-Angaben noch nicht so richtig kapiere. Wenn Du vielleicht Lust und Zeit hast, kannst Du mir's mal erkären.
Du hast den Link (oben) gesehen, dort wird genau dieser Workout (containing-float) den ich eingebaut habe erklärt.
VORSICHT dieser ist wie oben gezeigt nicht vollständig, da Du nur nach Firefox gefragt hast. Also unbedingt nochmal studieren.


Zitat:
Kennst Du Seiten, die sich mit CSS beschäftigen und die einem Technicken vermitteln?
Ja, hier und immer schön mitlesen. Ansonsten schau mal unter Ressourcen dort wird so ziemlich jede Quelle aufgeführt.
__________________
</ulle>
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Wie vergrößere ich die Gallery Boxen? butters CSS 3 27.11.2011 03:56
Frage zu horizontalen Linien marvin1989 CSS 3 30.12.2009 00:35
Firefox problem bei der anzeige mairu CSS 11 29.01.2009 13:49
prblemme mit mein inhalt div carlos587261 CSS 3 23.04.2008 15:07
So langsam bekomme ich die Krise mit den DIVs Thuroc CSS 12 12.11.2007 15:25


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:59 Uhr.