Positionieren mit Float @ tutorials.de: Tutorials, Forum & Hilfe

xxenon · 17.09.04 20:06

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-Code:


<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

Fabian Hofmann · 17.09.04 20:53

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>

xxenon · 17.09.04 21:42

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.

Fabian Hofmann · 17.09.04 23:35

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>

xxenon · 18.09.04 09:31

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

Fabian Hofmann · 18.09.04 17:25

Verdammt, das hab ich mir wohl falsch angewoehnt

Danke.

Hier auch noch mal schwarz auf weiss in den CSS Specs:
http://www.w3.org/TR/REC-CSS2/visuren.html#flow-control

xxenon · 18.09.04 17:36

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

**Quaese** · 18.09.04 21:55

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 :

1	.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

scaphilo · 12.10.04 10:12

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

scaphilo · 12.10.04 10:35

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;
           [B] display: inline;[/B]
           width:50px;}
#rechts{ float:right;
             [B]display: inline;[/B]
            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

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

<ul> mit Float positionieren?

3 (!) Float-Probleme im IE6/7 (Float über die Grenzen eines Elements hinaus)

Zwei Blocks mit gleicher Höhe und mit float nebeneinander positionieren

float: left Tag in Mitte positionieren?

Convert CString Typ -> int,Float und int,float -> String

E-Mail:

Abonnieren Abbestellen