✔ div width FF und IE

[shockshell]

Hi,
ich hab da mal ne Frage.
Wenn ich folgendes Konstrukt habe:

<div id="subgroup">
   <div class="col">
       <div class="row">
           <a><img...><p>ein link</p></a>
       </div>
   </div>
   <div class="col">
       <div class="row">
           <a><img...><p>noch ein link</p></a>
       </div>
   </div>
</div>

und dazu folgenden Style:

    #subgroup       {width:auto}
    #subgroup a     {font:normal 12px arial;color:#FFF;text-decoration:underline}
    #subgroup .row  {clear:both;height:50px;white-space:nowrap;padding-bottom:10px;border:1px solid red}
    #subgroup img   {float:left;margin-right:10px}
    #subgroup p     {padding-top:15px;height:50px}
    #subgroup .col  {float:left;padding-right:20px}

Dann habe ich im FF eine "Tabelle" mit zwei Spalten.
Im IE ist das row-div bei diesem Style aber 100% der Seite breit, sodass ich garnicht erst zwei Spalten bekomme.

Mit width:auto funktioniert das auch nicht. Es bleibt 100% der Seite breit. Wenn ich die Breite des Divs absolut setze (z.B.: width:200px), so wird der Text im Link automatisch unter das IMG geschoben, wenn er länger als 200px ist, was nicht sein soll.

Kann man im IE einstellen, dass er das div wirklich nur so breit macht, wie der Inhalt darin breit ist? So wie es der FF von grundauf macht?

Danke.

Marcus

 

[Gumbo]

Versuchst du etwa eine Tabelle durch div-Elemente darzustellen? Wenn es sich tatsächlich um tabellarische Daten handelt, ist es kein Verbrechen, dafür auch eine Tabelle zu verwenden.
Übrigens ist das p-Element innerhalb eines a-Elements nicht erlaubt.

 

[shockshell]

Es sind keine tabellarischen Daten im eigentlichen Sinne.
Es handelt sich um die Darstellung von Untergruppen (Bild+Link)
Darum habe ich mich auch für DIV's entschieden.
Habe es mittlerweile aber gelöst. Das mit dem <p> ist mir jetzt auch bekannt . Den Code poste ich noch (Der Vollständigkeit halber). Hab Ihn gerade nicht zur Hand.

Marcus.

 

[Gumbo]

Um dem Ganzen eine gewisse Semantik zu verleihen, solltest du auch mit Listen, möglicherweise sogar mit Definitionslisten, arbeiten.

 

[shockshell]

So,

habs jetzt fertig gemacht. Mit der Liste hattest Du recht. Verkürzt den Code auch noch um die class="" Attribute.

<div id="subgroup">
   <ul>
       <li><a><img src="..." />...</a></li>
   </ul>
   <ul>
       <li><a><img src="..." />...</a></li>
   </ul>
</div>

    #subgroup a     {font:normal 12px arial;color:#FFF;text-decoration:underline}
    #subgroup li    {white-space:nowrap;padding-bottom:30px}
    #subgroup img   {float:left;margin-right:10px}
    #subgroup ul    {float:left;padding-right:20px}

 

[Maik]

So,

habs jetzt fertig gemacht. Mit der Liste hattest Du recht. Verkürzt den Code auch noch um die class="" Attribute.

Frage beantwortet? Problem gelöst? Dann markiere dein Thema bitte als "Erledigt"!

Thanx ;-]