2 Divs floaten

[GN911]

Hallo,

ich versuch 2 Divs zu floaten, so das sie nebeneinander stehen. Ich kann #indexname aber keine feste Größe zuweisen, so das ich #quoteticker mittels margin-left entsprechend nicht dahin bekomme.

<div class="subcolumns taeser">
  <div class="c25l">
    <div class="subcl">
      <div id="indizes">
        <img src="images/pfeile/index_top.gif" alt="" /><span>Index</span>Punkte
      </div>
    </div>
  </div>
  <div class="c75r">
    <div style="padding: 0;" class="subcr">
      <div id="newsticker">oberer Ticker
      </div>
      <div id="indexname">Indexname |</div>
      <div id="quoteticker">unterer Ticker</div>
    </div>
  </div>
</div>

basemod.css

  .taeser { background: #f8f8f8; padding: 0; margin: 0; }
  #indizes { margin: 0; padding: 0; }
  #indizes span { margin: 0 0.8em 0 0.8em; padding: 0; }
  #newsticker { background: #9bf; padding: 0.3em; margin: 0; }
  #indexname { background: #fff; float: left; padding: 0.3em; margin: 0; }
  #quoteticker { background: #36f; padding: 0.3em; margin: 0; }


content.css

  #indizes { text-align: center; line-height: 4em; font-weight: bold; }
  #newsticker { color: #36f; font-weight: bold; }
  #indexname { font-weight: bold; }
  #quoteticker { color: #fff; font-weight: bold; }

Geht das trotzdem irgendwie?

GN911

 

[Maik]

Hi,

in diesem Fall geht es dann so:

#quoteticker { background: #36f; padding: 0.3em; margin: 0; float:left; }

mfg Maik

 

[GN911]

Hi Maik,

okay danke, habe den float mit eingebaut. Das Funktioniert, aber #quoteticker { background: #36f; ... soll über die ganze Breite gehen. Mit width 100% bricht er natürlich um. Gibt es dar noch was anderes?
Was noch ein Problem ist, ist wenn ich im FF größer Zoom, dass zwischen #quoteticker und .teaser { border-bottom.... eine Lücke entsteht.

http://ofmf.de/DEMO/

Gruß GN911

 

[Maik]

Wenn du der linken Spalte keine feste Breite zuweist, um die rechte Spalte mit einem eintsprechenden linken Außenabstand zu versehen, gibt es auch keine weitere Möglichkeit, damit die rechte Spalte die restliche Breite des übergeordneten Elements einnimmt.

Da du mit YAML arbeitest, kannst du dich ja mal in der Dokumentation bzgl. der Funktionsweise von Floats einlesen.

mfg Maik

 

[GN911]

na dann kann ich es wohl bloß so machen:

      <div id="indexname" class="dax">Dax |</div>
      <div id="quoteticker" class="dax">Stock Ticker</div>

basemod.css

  .taeser { background: #f8f8f8; padding: 0; margin: 0; }
  #indizes { margin: 0; padding: 0; }
  #indizes span { margin: 0 0.8em 0 0.8em; padding: 0; }
  #newsticker { background: #9bf; padding: 0.3em; margin: 0; }
  #indexname { background: #fff; width: 6.2em; float: left; padding: 0.3em; margin: 0; }
  #quoteticker { background: #36f; padding: 0.3em; margin: 0; margin-left: 6.8em; }
  
  #indexname.dax { width: 4.2em; }
  #quoteticker.dax { margin-left: 4.8em; }

und jeweils per Javascript für den jeweiligen Index eine andere Breite zuweisen.

mfg GN911

 

[GN911]

Hallo,

hat noch einer ne Lösung für mein Problem, das .teaser im Safari durchschat?


Gruß