✔ 2 Divs nebeneinander - Breite verhält sich komisch

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
 
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.
 
Deine Seite verhält sich komisch, weil du N U R komische Sachen machst. Bitte lerne erst die Grundlagen.
 
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.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <title></title>   
    <style type="text/css">
      /* <![CDATA[ */    
        * {                           
        margin:0;
        padding:0;      
        }       
        #wrapper {
        margin:0 auto;
        width:72em;
        border:0.1em solid #ccc;
        }
        #wrapper div {
        padding:1em;
        }
        #header {
        border-bottom:0.1em solid #ccc;
        }
        #content {
        float:left;
        width:53.4em;
        border-right:0.1em solid #ccc;        
        background:#efefef;
        }
        #right {
        margin-left:55.4em;
        border-left:0.1em solid #ccc;
        background:#e0e0e0;
        }
        #footer {
        clear:both;
        border-top:0.1em solid #ccc;
        }
      /* ]]>  */
    </style>  
  </head>
  <body>
    <div id="wrapper">
      <div id="header">header</div>
      <div id="content">content</div>
      <div id="right">right</div> 
      <div id="footer">footer</div>  
    </div>
  </body>
</html>
 
Zuletzt bearbeitet:
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.
 
Brootex hat gesagt.:
@djheke: [...] was für "Grundlagen" muss ich lernen.
Zum Vergrößern anklicken....
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:
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: 
<div id="menu">
  <ul id="lnavilist">
   <li><strong>Home</strong></li> <!-- aktuelle Seite -->
   <li><a href="news">News</a></li>
  </ul>
</div>

So werden Form Elemente beschriftet:
Code: 
 <label for="username">Username:</label>
	 <input size="20" type="text" name="username" id="username">
 
Zuletzt bearbeitet:
djheke hat gesagt.:
Deine Seite verhält sich komisch, weil du N U R komische Sachen machst. Bitte lerne erst die Grundlagen.
Zum Vergrößern anklicken....

djheke hat gesagt.:
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: 
<div id="menu">
  <ul id="lnavilist">
   <li><strong>Home</strong></li> <!-- aktuelle Seite -->
   <li><a href="news">News</a></li>
  </ul>
</div>

So werden Form Elemente beschriftet:
Code: 
 <label for="username">Username:</label>
	 <input size="20" type="text" name="username" id="username">
Zum Vergrößern anklicken....
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:
Stimmt. Das komische Verhalten ist u.a. auf ein fehlendes </div> zurückzuführen.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück