✔ Höhe 100% und trotzdem Scrollbalken

Jop danke.
Das is eigentlich klar.

Das eigentliche Problem ist, das es passieren kann das ein Container etwas höher als die anderen sein kann.
Passiert dies dann reist das die ganze Tabelle auseinander.

Mit einer Tabelle kann das so nicht passieren.
Denn die ganze Zeile(<tr>) passt sich ja der höchsten Spalte(<td>) an.

Meinst du da gibt es eine Lösung oder muss ich da bei meinem Tabellendesign bleiben.

Gruss
 
Vielleicht ist dir ja hiermit gedient, dass bei längerem Inhalt in einer der Boxen, die nächste Zeile darunter sauber anschließt, und sich daraus eine oder mehrere Boxen nicht nach oben verschieben:
HTML: 
<div class="row">
     <div class="box">box 1</div>
     <div class="box">box 2</div>
     <div class="box">box 3</div>
</div>
<div class="row">
     <div class="box">box 4</div>
     <div class="box">box 5</div>
     <div class="box">box 6</div>
</div>
CSS: 
.row {
clear:left;
}
.box {
float:left;
width:33.3%;
}

mfg Maik
 
Diese Überlegung ist mir auch schon gekommen.

Leider klappt das aber in der Schleife nich so ganz wie ich das will.

Vielleicht sitze ich einfach schon zu lange dran.

Das ist mein PHP Code. Die 3 Einträge werden leider nicht richtig umschlossen.

Code: 
   if($x==1)
    {
    $new_products_modul_string .= '<div style="border:1px solid; clear:left;">';
    }     

     

    $new_products_modul_string .= '<div style="float:left; width:33.3%; text-align:center;">test</div>';
   
  
     if($x==3)
    {
    $new_products_modul_string .= '</div>';
    $x=0;
    }

Ich verzweifle solangsam.
 
Wie sieht denn die HTML-Ausgabe des PHP-Codes aus?

Bei der Tabellenkonstruktion hat es deiner Aussage nach doch auch bislang funktioniert.

mfg Maik
 
Das ist der Quelltext den ich nur ein wenig übersichtlicher gemacht habe.

HTML: 
<div style="border:1px solid; clear:left;">

<div style="float:left; width:33.3%; text-align:center;">1</div>
<div style="float:left; width:33.3%; text-align:center;">2</div>
<div style="float:left; width:33.3%; text-align:center;">3</div>

</div>

<div style="border:1px solid; clear:left;">

<div style="float:left; width:33.3%; text-align:center;">1</div>
<div style="float:left; width:33.3%; text-align:center;">2</div>
<div style="float:left; width:33.3%; text-align:center;">3</div>

</div>

Der übergeordnete Container der die 3 EInträge jeweils umschließen sollte geht nicht.
Er wird immer vor den 3 EInträgen schon geschlossen.
Also der schließende div tag wird einfach nicht berücksichtigt.

Selbst wenn ich den Quellcode so in eine einfache HTML Datei kopiere ists das gleiche Problem.
Irgendwas ist da doch faul. :-/

Gruss

EDIT: Habs hinbekommen mit <br style="clear:both"/> am Ende. Danke für Deine Unterstüzung!
 
Zuletzt bearbeitet:
3 divs nebeneinander mit 33% klappt nicht ganz.

Hallo Leute,


ich habe anhand eines Tutorials hier von Maik ein 3 Spalten Design mit Containern bewerkstelligt.
Funktioniert alles prima.

Bis auf die Tatsache das ich im CenterCol keine 3 DIVs nebeneinander bekomme ohne das der dritte in der nächsten Zeile angezeigt wird.
Ich weis einfach nicht woran es liegt.

Sobald ich einen Rahmen um die 3 DIVs mache UND Margin auf 1px setze verrutscht der lezte Block in die nächste Zeile.

MAche ich das in einer leeren HTML Datei dann klappt das.


Hier mal der Code:

Das ist das Elternelemt hier befinden sich 3 Spalten (links, rechts, center)
Code: 
div#wrapper {
position: relative;
margin: 0 auto;
width: 990px;
height: 100%;
min-height: 100%;
height: auto !important;
background:#ffffff;

}

Das ist der Center Teil:

Code: 
div#centerCol {
margin: 0 160;
overflow:auto;
}

Und in diesem CenterCol befinden sich jeweils die 3 Divs nebeneinander:

Code: 
div#modulsBasic {
float:left; 
width:33%;  
text-align:center; 
border:1px solid;
margin:1px;
}

Wie gesagt. mache ich den Rahmen ODER das Margin weg. dann wirds wie es soll angezeigt.
Ich versteh das nicht. Kann da jemand helfen?

EDIT: setze ich z.b. 32% für die 3 DIVs dann gehts auch. Aber dann sieht es nicht gut aus da es ja nicht bündig ist rechts.

Gruss
 
Moin,

gemäß dem Box-Modell wird der horizontale Außenabstand, sowie der linke und rechte Rahmen zur width-Deklaration addiert, was in der Summe mehr als 100% in der Gesambreite ergibt, und folglich zum Umbruch der dritten Box führt.

Lösung: Da sich Pixel von Prozent (%) nicht subtrahieren lassen, empfehle ich das Markup der Boxen "modulsBasic" um einen weiteren <div>-Block zu erweitern / verschachteln, und diesem die beiden CSS-Eigenschaften zuzuweisen.

Übrigens darf der ID-Bezeichner #modulsBasic im (X)HTML-Dokumentbaum nur einmalig vergeben werden. Nutze in diesem Fall stattdessen den Klassenbezeichner.

mfg Maik
 
Guten Morgen Maik,

danke für die Antwort.
Was das boxmodel betrifft bin ich nun schlauer. Gut zu wissen!

Wie meinst Du das denn genau, was ich jetzt tun soll?
Ich weis leider nicht genau wie ich das gestalten soll.

Der Groschen ist noch nich ganz gefallen :-(

Gruss
 
HTML: 
     <div id="centerCol">
          <div class="modulsBasic"><div>1</div></div>
          <div class="modulsBasic"><div>2</div></div>
          <div class="modulsBasic"><div>3</div></div>
          <div class="modulsBasic"><div>4</div></div>
          <div class="modulsBasic"><div>5</div></div>
          <div class="modulsBasic"><div>6</div></div>
     </div>
CSS: 
div.modulsBasic {
float:left;
width:33%;
text-align:center;
}
div.modulsBasic div {
border:1px solid;
margin:1px;
}

mfg Maik
 
Gerade wollt ich posten das ich es nun rausbekommen hab was du meintest :)

Danke dir vielmals. Wieder was dazu gelernt!

Bye und schönen Sonntag.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück