Div's im Div richtig postionieren

[chaosente]

also ich habe folgenden code:

<div>
       <div class="bla">Eins</div>
       <div class="bla">Zwei</div>
       <div class="bla">Drei</div>
</div>

Aber irgendwie kriege ich es nciht hin, das sich die drei divs innerhalb des andere befinden. Der äußere ist ganz schmal und die anderen gehen darüber hinaus.

Hier noch mein css:

.bla {
border: 1px dashed gray;
margin: 2px 10px 0 10px;
}

 

[Maik]

Hi,

wie lautet denn der CSS-Code für das Elternelement?

Denn ohne jegliche CSS-Formatierung nimmt es als Blockelement zunächst mal eine 100%-Breite ein, und umschliesst somit die drei eingebetteten DIVs.

 

[chaosente]

hatte vergessen das die inneren divs float: left; sind und ich rausgefunden hab, das das dazu führt, dass sie so komisch positioniert sind.


Aber wie kann ich die drei divs sonst nebeneinander positionieren?

 

[Maik]

Da es sich dann um eine Floatumgebung handelt, muß diese auch zum Abschluß "gecleart" werden:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

<div class="clearfix">
       <div class="bla">Eins</div>
       <div class="bla">Zwei</div>
       <div class="bla">Drei</div>
</div>

Hast du hier ansonsten noch weitere relevante CSS-Angaben vergessen, die der Ursachenforschung dienlich wären?

 

[Peter Klein]

Hi

Sag mal bitte was hat es denn mit folgender rot markierter Eigenschaften auf sich?

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

 

[Maik]

Hi,

in Kombination mit den Pseudoelementen :before oder :after lässt sich mit der content-Eigenschaft Inhalt in einem Dokument erzeugen - in obigem Beispiel wird nachfolgend ein Punkt gesetzt.

Der Artikel zum CSS-Code kann auf http://positioniseverything.net/easyclearing.html nachgelesen werden.

 

[Peter Klein]

Ja das mit dem Content weiss ich, aber der Punkt, wozu dient der? Nur das was "drinsteht"?

Die Seite kenne ich, und werde sie mir gleich mal wieder durchlesen.

 

[Maik]

[...] aber der Punkt, wozu dient der? Nur das was "drinsteht"?

Die Seite kenne ich, und werde sie mir gleich mal wieder durchlesen.

Dann lies dir auch den Abschnit "Using :after" durch:

Imagine that we use :after to insert a simple character like a 'period', and then give that generated element {clear: both;} . That's all you really need to do the job, but no one wants a line space messing up the end of their clean container box, so we also use {height: 0;} and {visibility: hidden;} to keep our period from showing.

 

[chaosente]

Eigentlich will ich eine Navigation bauen.
Oben sollen die navigationspunkte eins zwei drei als eine art button stehen und darunter eine content box. Die drei element oben sollen nebeneinander aufgereiht sein und die contentbox dierekt berühren. Vielleicht geh ich einfach falsch heran...? Kann mir jemand sagen wie ich da ma besten rangehe?

 

[Maik]

Vielleicht solltest du mal besser den bisherigen, doch vor allem vollständigen Quellcode posten, damit auch auf deine Fragen näher eingegangen werden kann, denn die tutorials.de-Glaskugel hat sich in den "Sommerurlaub" verabschiedet.