Vayo: TABLE innherlab eines DIVs falsch dargestellt

SELF-Forum

TABLE innherlab eines DIVs falsch dargestellt

Vayo
– Informationen zu den Bewertungsregeln

Hallo,

folgendes Problem: ich habe einen DIV-container, der left gefloatet ist. Ein weiterer grenzt rechts daran an. Nun befindet sich ein TABLE-Element in diesem zweiten DIV mit einer Breite von 100%. Es nimmt den kompletten Raum rechts des ersten DIVs ein. Firefox findet das super, der IE setzt das zweite DIV allerdings unter das Erste. Jedoch nur, wenn:

1. mindestens ein TABLE-Element MIT TRs und TDs enthalten ist
2. die Breite größer ist als 99%

HTML Code:

<body>
<div id="main">
 <div id="content_frame">
  <div id="navi">
   <img src="img/header.jpg" alt="header" border="0" />
  </div>
  <div id="content">
   <table cellspacing="1" cellpadding="0" class="main_table">
    <colgroup>
     <col width="30%">
     <col width="70%">
    </colgroup>
    <tr>
     <td class="heading" colspan="2">Benutzeraccount</td>
    </tr>
    <tr>
     <td>Benutzername:</td>
     <td><input type="text" name="username" /></td>
    </tr>
   </table>
  </div>
 </div>
</div>
</body>

CSS:
/* general */
* {
 margin:0;
 padding:0;
 border:0;
}

option {
 padding-left:0.4em;
}

input {
 border:1px #c4c4c4 solid;
 padding:2px;
}

html {
 height:100%;
}

body {
 min-height:100.01%;
 font-size:100.01%;
 position:relative;
 color:#666;
 background:#fff;
 text-align:left;
 font-family:tahoma;
 font-size:12px;
 z-index:0;
}

/* Main */
#main {
 width:100%;
}

#content_frame {
 width:100%;
}

#content {
 margin-left:215px;
 margin-right:15px;
 padding-top:4px;
}

/* Content */
.main_table {
 background-color:#c4c4c4;
 width:100%;
 margin-top:16px;
}

.main_table td {
 background-color:#f5f5f5;
 height:26px;
 vertical-align:middle;
 padding-left:2px;
 padding-right:2px;
}

.heading {
 font-size:14px;
 font-weight:bold;
 background:url("../img/verlauf_high.jpg") bottom;
}

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. TABLE innherlab eines DIVs falsch dargestellt

    Vayo
    – Informationen zu den Bewertungsregeln

    Hey, habe gerade einen Walkaround entdeckt =)

    (und da mein ganzer CSS-Code sowieso total der Cheat ist, damit ich ein DIV mit fixer Breite neben eins mit 100% der restlichen Breite setzen kann, blickt man da sicher eh erstmal nicht durch...)

    Meine Lösung: float:left raus, #Navi absolut positionieren, eine Z-Ebene höher setzen, Rest wie gehabt.

    Was ich aber "witzig" finde:

    <div id="content_frame">

    <div id="content">
       <table cellspacing="1" cellpadding="0" class="main_table">
        <colgroup>
         <col width="30%">
         <col width="70%">
        </colgroup>
        <tr>
         <td class="heading" colspan="2">Benutzeraccount</td>
        </tr>
        <tr>
         <td>Benutzername:</td>
         <td><input type="text" name="username" /></td>
        </tr>
       </table>
      </div>

    </div>

    #content_frame ist auf 100% Browserbreite gesetzt.
    #content besitzt folgenden parameter: margin-left:215px;
    #main_table ist auf 100% gesetzt

    Erläuterung:
    der DIV-Container #content besitzt keinerlei Angabe zur Breite. Alle Tochterelemente mit einer Breite von 100% nutzen nun aber den vollen verbleibenden Platz ABZÜGLICH des Margins von #content bis zum Browserende aus.
    Bis auf oben genannte Änderungen gilt der Code aus meinem ersten Post.

    So kann man sehr gut statische Breitenangaben mit prozentualen kombinieren ohne die Browserbreite abfangen zu müssen!

    (hoffe das hilft mal irgendwann wem)

    MfG
    Vayo

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln