1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

2 Divs nebeneinander - Breite verhält sich komisch

Dieses Thema im Forum "CSS" wurde erstellt von Brootex, 31. März 2012.

  1. Brootex

    Brootex Grünschnabel

    Hallo Community

    Ich habe mich gerade hier registriert, da diese Seite mir schon bei einigen Problemen helfen konnte. Ich arbeite zur Zeit an einer eigenen Website, welche auch schon unter http://brootex.com zu finden ist.

    Da kommt aber auch schon das Problem. Wenn man nun die Seite öffnet findet man einen Contentblock und rechts davon einen Login und weiteres Block. Diese beide Blöcke zusammen sind aber leider nicht so breit wie das darüberliegende Div vom Menü und dem des Headers. Der Header, das Menü und diese 2 Blöcke sind von einem Div namens Pageraster umgeben, welcher eine variable Breite hat (in em angegeben wie auch fast alles andere).

    Wenn ich jetzt den rechten Block 1% breiter mache, rutscht er runter unter den Content. Ich hab keine Idee, weshalb das so ist, da ich wirklich alles mit em und % Werten angegeben habe ausser die Buttons im Menü.

    Ich hoffe es kann mir jemand helfen und wenn jemand den Quellcode nicht einsehen kann oder die bestimmten Stellen nicht findet, dann bitte melden, dann werde ich diese hier reinkopieren.

    Vielen Dank im Voraus. :D

    Freundliche Grüsse
    Brootex
  2. Brootex

    Brootex Grünschnabel

    Gut ich habe jetzt den rechten Block einfach aus dem Holder-Div herausgenommen und ein wenig mit den em Werten gespielt und nun ist es fast richtig aber man sieht kaum, dass da noch ein Pixel fehlt. Diese Lösung lasse ich mal temporär und wenn jemand eine bessere hat, dann kann er sich doch bitte melden.
  3. djheke

    djheke Erfahrenes Mitglied

    Deine Seite verhält sich komisch, weil du N U R komische Sachen machst. Bitte lerne erst die Grundlagen.
  4. spicelab

    spicelab ZENmechanic

    Mein Lösungsansatz nutzt margin-left (= linker Außenabstand) anstelle der width- und float-Regel für den rechten Spaltenblock, und beschränkt sich bei der em-Dimensionierung für Breite und Rahmenstärke auf eine Dezimalstelle.

    Code (HTML5):
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    5.   <head>
    6.     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    7.     <title></title>  
    8.     <style type="text/css">
    9.       /* <![CDATA[ */    
    10.        * {                          
    11.        margin:0;
    12.        padding:0;      
    13.        }      
    14.        #wrapper {
    15.        margin:0 auto;
    16.        width:72em;
    17.        border:0.1em solid #ccc;
    18.        }
    19.        #wrapper div {
    20.        padding:1em;
    21.        }
    22.        #header {
    23.        border-bottom:0.1em solid #ccc;
    24.        }
    25.        #content {
    26.        float:left;
    27.        width:53.4em;
    28.        border-right:0.1em solid #ccc;        
    29.        background:#efefef;
    30.        }
    31.        #right {
    32.        margin-left:55.4em;
    33.        border-left:0.1em solid #ccc;
    34.        background:#e0e0e0;
    35.        }
    36.        #footer {
    37.        clear:both;
    38.        border-top:0.1em solid #ccc;
    39.        }
    40.      /* ]]>  */
    41.     </style>  
    42.   </head>
    43.   <body>
    44.     <div id="wrapper">
    45.       <div id="header">header</div>
    46.       <div id="content">content</div>
    47.       <div id="right">right</div>
    48.       <div id="footer">footer</div>  
    49.     </div>
    50.   </body>
    51. </html>
    52.  
    Zuletzt bearbeitet: 31. März 2012
    dreifragezeichen sagt Danke.
  5. Brootex

    Brootex Grünschnabel

    Danke für die Antworten.
    @djheke: Bitte genauere Angaben... Was mache ich komisch und was für "Grundlagen" muss ich lernen. Ich nehme ja Kritik gerne entgegen, aber so ungenau kann ich das schlecht.
    @spicelab: Vielen Dank für die schöne Lösung. Werde diese morgen übernehmen.
  6. spicelab

    spicelab ZENmechanic

    Vermutlich zielte hier djheke auf das "Box-Modell" und seine Berechnung von Breite und Höhe gemäß W3C für CSS-Boxen ab ;)

    Mein erster Eindruck beim gestrigen Überfliegen deines Stylesheets war es zumindest, dass deine gewählten Maße (mit bis zu zwei krummen Stellen nach dem Komma) nicht stimmig waren, und in ihrer Gesamtsumme für beide Spaltenblöcke >72em ergaben ;-)

    Aktuell ist deine Seite nicht erreichbar, um den Rechenschieber zu zücken :D
    Zuletzt bearbeitet: 1. April 2012
  7. djheke

    djheke Erfahrenes Mitglied

    Ja vielleicht war es ein bissel ungenau. Leider ist deine Seite nicht erreichbar., darum kann ich nicht mehr genau sagen was alles falsch ist.

    Nicht so gut:
    center Tags haben im Markup nichts zu suchen. Elemente werden mit CSS zentriert.
    Eine Navigation gehört in einer ungeordneten Liste UL
    Formularelement werden nicht mit <b> sondern mit <label> gekennzeichnet.
    Mehr fällt mir im Moment nicht ein.

    So sollte eine Navi aussehen:
    Code (Text):
    1.  
    2. <div id="menu">
    3.   <ul id="lnavilist">
    4.    <li><strong>Home</strong></li> <!-- aktuelle Seite -->
    5.    <li><a href="news">News</a></li>
    6.   </ul>
    7. </div>
    8.  
    So werden Form Elemente beschriftet:
    Code (Text):
    1.  
    2.  <label for="username">Username:</label>
    3.      <input size="20" type="text" name="username" id="username">
    4.  
    Zuletzt bearbeitet: 1. April 2012
  8. spicelab

    spicelab ZENmechanic

    Sorry, die drei aufgezählten Punkte, die ausschließlich auf eine "optimierte" Markup-Struktur des HTML-Docs eingehen, sind überhaupt nicht als Ursache des vorgetragenen CSS-Problems relevant / verantwortlich.
    Zuletzt bearbeitet: 1. April 2012
  9. djheke

    djheke Erfahrenes Mitglied

    Stimmt. Das komische Verhalten ist u.a. auf ein fehlendes </div> zurückzuführen.
    Zuletzt bearbeitet: 1. April 2012
  10. spicelab

    spicelab ZENmechanic

    Was selbst dem Profi mal unterlaufen kann, ihn aber nicht unmittelbar dazu verdonnert, erst die "Grundlagen" zu lernen ;)
  11. djheke

    djheke Erfahrenes Mitglied

    Hier die Ursache
    Code (Text):
    1.  
    2.     <!-- CONTENT -->
    3.                 <h1>Welcome to Brootex.com!</h1><hr>            </div>
    4.         </div> <!-- dieser kommt vorm </body> -->
    5.  
  12. spicelab

    spicelab ZENmechanic

    Das zweitgenannte </div> gehört zu #pageraster, wozu im zweiten Post unmißverständlich dieses steht:

  13. spicelab

    spicelab ZENmechanic

    So, nachdem die Seite wieder verfügbar ist, hab ich das angesprochene CSS-Boxmodell rechnerisch überprüft ;-)

    Daraus folgt: 55.75em + 16.6em = 72.35em > 72em
  14. Brootex

    Brootex Grünschnabel

    Vielen Dank nochmal für die Antworten. Ich bin noch nicht so gut, da ich nur ein Informatiker-Lehrling bin und noch am lernen bin. Naja ich finde die Antworten von djheke sehr gut, da ich diese auch zur Verbesserung der Seite verwenden kann. Die Navigation muss ich sowieso noch komplett überarbeiten, weshalb auch noch keine unnummerierte Listen verwendet wurden.

    Und jetzt wieder zum Div-Problem: Ich verstehe nicht ganz, spicelab du sagst dass die em-Werte nicht genau die Breite des "pageholders" ergeben? Ich habe auf jeden Fall geschafft, dass die beiden Boxen nun nebeneinander sind, aber wenn man das Fenster vom Browser (bei mir zur Zeit Chrome) verkleinert, dann wird das rechte Div wieder nach unten geschoben.
    Hoffentlich wisst ihr weshalb das so ist, ich werde noch die em-Werte zusammenzählen und die Breite richtig machen.

    EDIT: Habe die Werte nun angepasst und nach meinen Nachrechnungen ergeben sie nun 72em. Jetzt ist jedoch die Breite wieder sichtbar kleiner als das Menü darüber.
    Zuletzt bearbeitet: 1. April 2012
  15. spicelab

    spicelab ZENmechanic

    Wenn sich #right (unter Berücksichtigung der zu korrigierenden Dimensionierungsfehler!) wieder innerhalb von #pageraster befindet, wird es von den Browsern bei verkleinerten Viewport nicht nach unten umgebrochen, sondern dem Nutzer wunschgemäß der horizontale Scrollbalken zur Verfügung gestellt - siehe hierzu auch mein gestriges Demo.

    Dass dir dort ein Rechenfehler unterlaufen ist, hab ich in meinem letzten Beitrag nachgewiesen.
    Zuletzt bearbeitet: 1. April 2012
  16. Brootex

    Brootex Grünschnabel

    Ja das war nicht mal ein Rechenfehler, als mehr ein nicht kontrollieren. :D Ich habe sie nun wieder im Pageraster (beide Divs) aber wenn man auf die Seite geht, sieht man, wie das Div #right auf seiner rechten Seite nicht gleich aufliegt, wie das Menü darüber, welches auch im #pageraster ist und 100.1% Breite hat.
  17. spicelab

    spicelab ZENmechanic

    Dann entferne mal umgehend komplett diese Angabe für #header u. #menu, denn die linke und rechte Rahmenstärke wird, wie in meinem genannten Link zum Boxmodell erläutert, zu width addiert, was deutlich mehr als 100% ergibt, und deshalb die Breite des umschließenden DIV überschreitet, dessen gewählte Breite in "em" den 100% entspricht.

    Entfallen hier diese width-Regeln, expandieren auch nicht die Boxenbreiten wegen des deklarierten Rahmens.
    Zuletzt bearbeitet: 1. April 2012
  18. Brootex

    Brootex Grünschnabel

    Das habe ich komplett vergessen. Aber ich verstehe es irgendwie trotzdem nicht. Ich habe nun die Breite des Headers und des Menüs auf 71.8em (72em - 2x 0.1em wegen des Borders) heruntergesetzt und auch mit width: auto; wird die Breite nicht gleich wie die der rechten Box.
  19. spicelab

    spicelab ZENmechanic

    Wenn diverse Browser mit den vorgenommenen Korrekturen noch immer nicht klarkommen, nutze einfach das CSS meines alternativen funktionstüchtigen Lösungbeispiels.
    Zuletzt bearbeitet: 1. April 2012
  20. djheke

    djheke Erfahrenes Mitglied

    Lass doch einfach alle border,padding und margins weg. Diese kannst du ja den enthaltenden Elementen zuweisen. Ist am einfachsten.

Diese Seite empfehlen