• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

float right und float left

C

Corraggiouno

Mitglied
hi,

habe folgenden Code geschrieben:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Jaki und Klaiber</title>
<link href="css/jk.css" rel="stylesheet" type="text/css" />
</head>

<body>
 <div id="wrapper">
  <h1>Jaki und Klaiber</h1>
   <ul id="navigation">
    <li class="none_bg"><a href="unternehmen.html">Unternehmen</a></li>
    <li><a href="leistungen.html">Leistungen</a></li>
    <li><a href="partner.html">Partner</a></li>    
    <li><a href="karriere.html">Karriere</a></li>
    <li><a href="kontaktformular.html">Kontakt</a></li>
   </ul>
  <div id="maintext">
  <h2>Unsere Partner</h2>
   <ul id="partnerlist">
   <li><a href="http://www.arbonia.de/Deutsch/" target="_blank"><img src="http://www.html.de/images/arbonia.gif"></a></li>
   <li><a href="http://www.biral.ch/" target="_blank"><img src="http://www.html.de/images/biral.gif"></a></li>
   <li><a href="http://www.buderus.de/" target="_blank"><img src="http://www.html.de/images/buderus.gif"></a></li>
   <li><a href="http://www.danfoss.com/Germany/" target="_blank"><img src="http://www.html.de/images/danfoss.gif"></a></li>
   <li><a href="http://www.duravit.de/" target="_blank"><img src="http://www.html.de/images/duravit.gif"></a></li>
   <li><a href="http://www.geberit.de/web/appl/de/wcmsde.nsf/pages/index" target="_blank"><img src="http://www.html.de/images/geberit.gif"></a></li>
   <li><a href="http://www.grohe.de/" target="_blank"><img src="http://www.html.de/images/grohe.gif"></a></li>
   <li><a href="http://www.grundfos.de/" target="_blank"><img src="http://www.html.de/images/grundfos.gif"></a></li>
   <li><a href="http://www.hansa.de/" target="_blank"><img src="http://www.html.de/images/hansa.gif"></a></li>
   <li><a href="http://www.hansgrohe.de/index.htm" target="_blank"><img src="http://www.html.de/images/hansgrohe.gif"></a></li>
   <li><a href="http://www.honeywell-haustechnik.de/" target="_blank"><img src="http://www.html.de/images/honeywell.gif"></a></li>
   <li><a href="http://www.idealstandard.de/" target="_blank"><img src="http://www.html.de/images/ideal_standard.gif"></a></li>
   <li><a href="http://www.junkers.com/de/de/start/index.html" target="_blank"><img src="http://www.html.de/images/junkers.gif"></a></li>
   <li><a href="http://www.kaldewei.de/" target="_blank"><img src="http://www.html.de/images/kaldewei.gif"></a></li>
   <!--<li><a href="http://www.klowa.de/home_klowa_bad_ulm.html" target="_blank"><img src="http://www.html.de/images/klowa.gif"></a></li>-->
   <li><a href="http://www.reisser.de/" target="_blank"><img src="http://www.html.de/images/reisser.gif"></a></li>
   <li><a href="http://www.viessmann.de/" target="_blank"><img src="http://www.html.de/images/viessmann.gif"></a></li>
   <li><a href="http://www.villeroy-boch.com/de/de/home.html?no_cache=1" target="_blank"><img src="http://www.html.de/images/villeroy_boch.gif"></a></li>
   <li><a href="http://www.wilo.de/cps/rde/xchg/de-de/layout.xsl/index.htm" target="_blank"><img src="http://www.html.de/images/wilo.gif"></a></li>
   <li><a href="http://www.weishaupt.de/" target="_blank"><img src="http://www.html.de/images/weishaupt.gif"></a></li>
  </ul>
  </div>
   <ul id="sidebar">
     <h3>Kontakt</h3>
     
   </ul>
 </div>
</body>
</html>

css-code:
Code: 
div#maintext
{
float:left;
background-color:#ffffff/*#E0E0E0*/;
background-repeat: repeat-y;
width: 600px;
margin-top:12px;
padding-top:15px;
padding-left: 15px;
padding-right:10px;
border-left:1px solid #b2b2b2;

}

ul#sidebar
{
list-style-type:none;
font-family: Verdana, sans-serif;
font-size:0.85em;
background-color:#D6D6D6;
background-repeat: repeat-y;
width: 188px;
height: 380px;
margin-top:12px;
padding-top: 20px;
padding-left: 22px;
border-left:3px double #A4A4A4;
border-right:1px solid #A4A4A4;
line-height: 1.8em;
}
mein ergebnis: Jaki und Klaiber
..............kann mir jemand erklären warum sich die sidebar nicht einfach rechts neben die maintext anschmiegt? Irgendwie befindet sich die Sidebar unterhalb der maintext
 
Werbung:
Vereinfache mal deinen Code, nimm alles unnötige raus, um das Problem noch immer zu verdeutlichen. Dann färbe deine div farblich ein, danach siehst normal, woher die Probleme kommen. Meist ist bei float der Fall, dass die zur Verfügung stehenden Gesamtbreite größer als die Summe der Float-Teile ist.
 
ok, aber mein wrapper folgendermaßen breit
Code: 
div#wrapper {
width: 840px;
margin:5px auto;
}
wenn ich die beiden div's maintext und sidebar zusammenaddiere
(sidebar:
width: 188px;
padding-left: 22px;
)

maintext
(
width: 600px;
padding-left: 15px;
padding-right:10px;
)

bekomme ich 835px......................das müsste doch ausreichen............
 
Werbung:
mach sie enger und probiers. Manchmal gibt es durch inherit zusätzlichen Platzbedarf für padding/margin
außerdem ist width nicht gleich max-width, breiter Inhalt kann manche block-Elemente aufblähen
 
ja das mit float:left bei meiner Sidebar ul#sidebar funktioniert; ich habe aber immer gedacht, dass wenn ich meine div#maintext links floate, dass dann automatisch meine sidebar rechts von maintext gesetzt wird;
Warum muss ich das explizit nochmal ein float: left für die ul#sidebar definieren?
 
Werbung:
......weiss niemand warum ich da zwei float definieren muss?...............wenn ich das float: left bei ul#sidebar weglassen, dann schiebt sich die sidebar unter div#maintext und nicht rechts daneben :?
Code: 
div#maintext
{
float:left;
background-color:#ffffff/*#E0E0E0*/;
background-repeat: repeat-y;
width: 600px;
height: 620px;
margin-top:12px;
padding-top:15px;
padding-left: 15px;
padding-right:10px;
border-left:1px solid #b2b2b2;
}


ul#sidebar
{
float:left;
list-style-type:none;
font-family: Verdana, sans-serif;
font-size:0.85em;
background-color:#D6D6D6;
background-repeat: repeat-y;
width: 188px;
height: 615px;
margin-top:12px;
padding-top: 20px;
padding-left: 22px;
border-left:3px double #A4A4A4;
border-right:1px solid #A4A4A4;
line-height: 1.8em;
}
 
Zuletzt bearbeitet:
Musst du nicht. Vereinfachtes Beispiel:

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <style type="text/css">
.wrapper {
    margin: 0 auto;
    width: 800px;
    background: red;
}

.content {
    width: 600px;
    float: left;
    background: yellow;
}

.sidebar {
    background: blue;
}
        </style>
    </head>

    <body>
        <div class="wrapper">
            
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus tincidunt rutrum. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum tristique lectus sit amet libero ultricies placerat condimentum lorem dapibus. Sed viverra nunc in quam lacinia viverra. Maecenas risus justo, ullamcorper sed elementum ac, pellentesque posuere odio. Nulla eget dui odio. Donec tempus congue augue vulputate dignissim. Fusce massa dolor, eleifend ut suscipit non, viverra congue mi.</p>
            </div>

            <div class="sidebar">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus tincidunt rutrum. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum tristique lectus sit amet libero ultricies placerat condimentum lorem dapibus. Sed viverra nunc in quam lacinia viverra. Maecenas risus justo, ullamcorper sed elementum ac, pellentesque posuere odio. Nulla eget dui odio. Donec tempus congue augue vulputate dignissim. Fusce massa dolor, eleifend ut suscipit non, viverra congue mi.</p>
            </div>

        </div>

    </body>

</html>
 
ich habs folgendermaßen definiert; eigentlich gleicht dein Code fast meinem............
Code: 
ul#sidebar
{

list-style-type:none;
font-family: Verdana, sans-serif;
font-size:0.85em;
background-color:#D6D6D6;
background-repeat: repeat-y;

height: 615px;
margin-top:12px;
padding-top: 20px;
padding-left: 22px;
border-left:3px double #A4A4A4;
border-right:1px solid #A4A4A4;
line-height: 1.8em;
}

div#maintext
{
float:left;
background-color:#ffffff/*#E0E0E0*/;
background-repeat: repeat-y;
width: 600px;
height: 620px;
margin-top:12px;
padding-top:15px;
padding-left: 15px;
padding-right:10px;
border-left:1px solid #b2b2b2;
}
.................jetzt breitet sich die sidebar aber über die ganze Breite des wrappers aus; befindet sich hinter somit auch hinter dem maintext
Jaki und Klaiber
 
Werbung:
Dein HTML-Code ist fehlerhaft. Besonders das hier

HTML: 
<ul id="sidebar">
     <h3>Kontakt</h3>

     
   </ul>

ist falsch. Da fehlt zumindest noch der Listenpunkt. Die anderen Fehlerchen sollten damit nicht unbedingt etwas zu tun haben:
[Invalid] Markup Validation of http://jaki.dyntec.de/partner.html - W3C Markup Validator

Wenn Du das korrigiert hast, gibt ul#sidebar mal noch "display: table;" - dadurch wird eine Aufzählungsliste vom (modernen) Browser wie eine Tabelle behandelt und kann auch ohne float umflossen werden. Für den IE muss man sich jedoch etwas anderes einfallen lassen (Stichwort zoom).
 
oh, danke für den Hinweis............hab meinen html-code verbessert
Wenn Du das korrigiert hast, gibt ul#sidebar mal noch "display: table;" - dadurch wird eine Aufzählungsliste vom (modernen) Browser wie eine Tabelle behandelt und kann auch ohne float umflossen werden
Zum Vergrößern anklicken....
ich überlege aber nach wie vor noch warum das mit dem float so ist. Wenn ich zwei div-bereich habe und in meinem Code (div#maintext) ein float:left definiere, dann müsste doch automatisch die ul#sidebar (ohne das ich ein float:left definiere) rechts von maintext drangesetzt werden............
 
Siehe Post #8.

Oder erstelle dir selbst eine kleine Beispielseite und probiere es aus.

Du hast vielleicht nicht die Anordnung der Elemente, von der du denkst, dass du sie hast.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben