Mehrere Spalten mit Border

[martinustreveri]

Hey,

ich arbeite gerade an einem neuen Design für meine Website. Dieses soll im Content-Bereich 2 Spalten haben.

Das habe ich z.Zt. so realisiert:

Code: Alles auswählen

div#content{
   
    width: 80%;
    margin: 30px 10%;
   
    border-left: 1px solid #E5E5E5;
    border-right: 1px solid #E5E5E5;
   
}

div#content div#margedInner{
   
    margin: 0 10px 0 10px;
   
}

div#content div#margedInner span.Col1{
   
    width: 50%;
    float: left;
   
   
}

div#content div#margedInner span.Col2{
   
    width: 50%;
    float: left;
   
}

div#content = Content-Div
div#margedInner = inneres Div um Text vom Border weg zu halten
span.Col1 = erste Spalte
span.Col2 = zweite Spalte

Allerdings wird das nur halbrichtig angezeigt:
Eigentlich müsste um div#content ein Rand (Links und Rechts) angezeigt werden, allerdings wird er das nicht: Anscheinend machen die Spalten den Border kaputt. Jedoch wird er angezeigt, wenn ich eine feste Höhe setze (->height: 100px;). Allerdings binde ich meinen Content über PHP ein und da muss das alles ja flexibel laufen.

Ich hoffe, ihr könnt mir helfen..

lg.
Martin

[dhx]

Moin,

martinustreveri:
div#margedInner = inneres Div um Text vom Border weg zu halten

Mit der Eigenschaft padding (http://de.selfhtml.org/css/eigenschaften/innenabstand.htm#padding) für den div#content könntest du dir diesen DIV-Container sparen.

martinustreveri:
span.Col1 = erste Spalte
span.Col2 = zweite Spalte

Da span http://de.selfhtml.org/html/text/bereiche.htm#inline keine Blockelemente enthalten darf, wäre hier das div Element wohl besser geeignet.

martinustreveri:
Allerdings wird das nur halbrichtig angezeigt:
Eigentlich müsste um div#content ein Rand (Links und Rechts) angezeigt werden, allerdings wird er das nicht: Anscheinend machen die Spalten den Border kaputt. Jedoch wird er angezeigt, wenn ich eine feste Höhe setze (->height: 100px;).

a)
Du hast die Eigenschaft float nicht verstanden, hier mal was zum lesen:
http://www.css-technik.de/css-examples/219_9/

b)
Wer floatet muss auch clearen. Dieser Satz trifft genau auf dein Problem zu:
http://www.little-boxes.de/lb1/14.5-vier-methoden-zum-einschliessen-von-floats.html

[martinustreveri]

Hey,

vielen Dank für deine Hilfe, habe es jetzt, rein nach http://www.css-technik.de/css-examples/219_9/beispiele/thumbnails2.html diesem Beispiel, problemlos geschafft.

lg.