✔ Positionieren mit Float

Status
Nicht offen für weitere Antworten.
xxenon

xxenon

Erfahrenes Mitglied
Hi Leute!

(Wieder einmal) Sitze ich seit einigen Stunden an einem Problem, und komme auf kein brauchbares Ergebnis...


Mein Problem ist, dass ich gerne 2 div-Container neben einander platzieren will, diese aber (zwecks farblicher Gestaltung) liegen beide in einem weiteren Container.

Eigentlich ist's eine einfache Sache, wobei ich nur CSS verwenden will anstatt von Tabellenstrukturen (mit denen dies zugegebenermaßen sehr einfach realisierbar wäre). Eine absolute Positionierung kommt ebenfalls nicht in Frage.


Mein erster Ansatz wäre eine Lösung mittels 'float', aber irgendwie schaffe ich es nicht damit.




Folgender Code veranschaulicht mein Problem:

PHP: 
<html>
<head>
<style type="text/css">
  div
    {
    border:1px solid black;
    padding:5px;
    }
  #links
    {
    float:left;
    width:50px;
    }
  #rechts
    {
    float:right;
    width:50px;
    }  
</style>
</head>
<body>
<div>
<div id="links">&nbsp;</div>
<div id="rechts">&nbsp;</div>
</div>
</body>
</html>



MfG.

xxenon
 
Hi,

Die Breite des Main-Containers muss die Gesamtbreite seiner (zwei) Kinder sein:
Code: 
<html>
  <head>
    <style type="text/css">
    #main {
      width: 104px;
    }

    #left {
      float: left;
      width: 50px;
      border: 1px solid #000000;
    }

    #right {
      float: right;
      width: 50px;
      border: 1px solid #000000;
    }
    </style>
  </head>
  <body>
    <div id="main">
      <div id="left">Links</div>
      <div id="right">Rechts</div>
    </div>
  </body>
</html>
 
Danke für die rasche Antwort, aber eine Abhilfe ist das leider nicht...

Wenn du mal den obigen Code abspeicherst und im Browser ansiehst wirst du bemerken, dass sich die einzelnen Container (so zusagen Eltern und Kinder) in der Höhe überschneiden, was allerdings das Design verpfuscht...

Dabei ist es nicht ausschlaggebend ob eine Breitenangabe gemacht wird oder nicht...


Naja, thx jedenfalls erstmal.
 
Du musst noch einen speziellen Zeilenumbruch einbauen:
Code: 
<html>
  <head>
    <style type="text/css">
    #main {
      width: 104px;
    }

    #left {
      float: left;
      width: 50px;
      border: 1px solid #000000;
    }

    #right {
      float: right;
      width: 50px;
      border: 1px solid #000000;
    }

    #content {
    }

    .Clear {
      clear: all;
    }
    </style>
  </head>
  <body>
    <div id="main">
      <div id="left">Links</div>
      <div id="right">Rechts</div>
      <br class="Clear" />
      <div id="content">
        Testtext, foo
      </div>
    </div>
  </body>
</html>
 
Nochmals Hallo!


Das clear war ein guter Tipp. Ich hatte damit zwar bereits herumexperimentiert, aber es nicht mit <br /> verwendet.

Ich möchte an dieser Stelle nur noch anmerken, dass clear keinen Wert namens 'all' kennt. Es gehört durch 'both' ersetzt (siehe SelfHTML).

Fabian ist hier wohl in der Schnelle ein Fehler unterlaufen...


Trotzdem big THX für den Gedankenanstoß =)



MfG. xxenon
 
Muss hier wohl oder übel noch anmerken, dass diese Variante zwar wunderbar funktionierte, aber leider nicht im Internet Explorer :-(

Habe mich schließlich doch für die Verwendung von Tabellen entschieden...


MfG.

xxenon
 
Hi,

falls Du Dich doch irgendwann nochmal für ein Design mit DIVs entscheidest und
nicht für den IE4 oder den NN4 optimierst, könnte folgende Lösung mit ClearDivs
in Frage kommen.
Code: 
<html>
<head>
<style type="text/css">
div{
     border:1px solid black;
     padding:5px;}
#links{ float:left;
        width:50px;}
#rechts{ float:right;
         width:50px;}

/* DIV zum Entfernen der float-Eigenschaft */
.clearDiv{ clear: both;
           font-size: 0px;
           line-height: 0px;
           height: -1px;
           /* DIV-Eigenschaften von oben überschreiben - für die Lösung des Problems uninteressant */
           padding: 0;
           border-width: 0;}

/* Folgende CSS-Datei wird nur vom IE 5.0 eingebunden: */
/* Höhe für den IE 5.0 anpassen */
@media tty {
    i{content:"\";/*" "*/}}; @import 'ie5_0.css'; {;}/*";}
}/* */
</style>
</head>
<body>
<div>
    <div id="rechts">&nbsp;</div>
    <div id="links">&nbsp;</div>
    <div class="clearDiv">&nbsp;</div>
</div>
</body>
</html>
Da der IE 5.0 die Höhe von -1 Pixel falsch interpretiert, muss der Wert manipuliert
werden. Das passiert mit @media tty{ ..., da die hier angegebene Datei nur vom
IE 5.0 eingebunden wird.

In ie5_0.css muss folgendes eingetragen sein:
Code: 
.clearDiv{ height: 0px;}
Das Ganze konnte ich erfolgreich im IE 5.0, IE 5.5, IE 6, im NN 7.1, Opera 7.22,
Mozilla 1.6 und im Firefox 0.9.1 testen.

Ciao
Quaese
 
hi

leider bin ich ein wenig spät mit meinem beitrag zu diesem thema doch habe ich im moment das problem dass mir der IE die beiden boxen wie gewünscht nebeneinander platziert aber die margin nicht richtig interpetiert der firefox macht alles wie gewünscht:

das ziel wären zwei separate boxen links und rechts mit je einem seiten abstand von 105px :

Code: 
#links{ float:left;
           margin: 0px 0px 0px 105px;
           width:50px;}
#rechts{ float:right;
            margin: 0px 105px 0px 0px;
             width:50px;}

kann man den fehler für den IE irgendwie korrigieren oder mach ich selbst vielleicht etwas falsch?

thx für die hilfe
 
ah ok hab was gefunden, ist immer so, wenn man mal was in nen forum schreibt findet man die lösung ohne hilfe, tut mir leid, falls jemand doch mal son problem hat da gibts ne lösung:

Code: 
#links{ float:left;
           margin: 0px 0px 0px 105px;
            display: inline;
           width:50px;}
#rechts{ float:right;
             display: inline;
            margin: 0px 105px 0px 0px;
             width:50px;}

an dieser stelle möchte ich mal denen gratulieren die für solch interessante bugs im IE verantwortlich sind, das kann doch nicht unabsichtlich geschehen, müsste doch auffallen sowas - egal.
viel erfolgt beim weiterprogrammieren wünsch ich all denen denen dieser beitrag half
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück