div anordnung

[DerBaer]

Hi,

ich hab jetzt schon wieder ein Problem mit dem Design:

Der entscheidende Teil meiner website sieht ungefähr so aus:

<div id='kartensammlung'>
    <div style='float:left;'>
        <div style='float:left; width:100px; height:100px;'>
            Text
        </div>
    </div>
    <div style='float:left;'>
        <div style='float:left; width:100px; height:100px;'>
            Text
        </div>
    </div>
    <div style='float:left;'>
        <div style='float:left; width:100px; height:100px;'>
            Text
        </div>
    </div>
</div><br>
<div id'anderesDiv'>Noch ein Text</div>

Jetzt ordnet er die 3 divs in Kartensammlung linksbündig nebeneinander an. Jetzt wollte ich die divs aber mittig machen(align=center oder text-align:center beim kartenstapeldiv hat net geklappt) Außerdem soll das "anderesDiv" unter den ganzen von oben zu sehen sein(mittig oder linksbündig ist vollkommend egal). Momentan liegt es nämlich rechts neben den anderen divs.

Vllt kann mir jemand einen tipp geben?
Und bevor ihr das extra anmerkt: ich brauch diese verschachtelung.

Mfg
DerBaer

[Jockelx]

Mal wieder sowas, was mit einer Tabelle schnell und intuitiv funktionieren würde?
Aber ich weiss, will hier kaum einer nutzen

Versuch mal sowas:

<div id='kartensammlung'>
    <div>
        <div style='float:left; width:100px; height:100px;'>
            Ich bin das ursprünglich 2te div
        </div>
    </div>
    <div style='float:left;'>
        <div style='float:left; width:100px; height:100px;'>
            Text
        </div>
    </div>
    <div style='float:right;'>
        <div style='float:left; width:100px; height:100px;'>
            Text
        </div>
    </div>
</div><br>
<div id'anderesDiv' style='clear:both'>Noch ein Text</div>

[DerBaer]

danke erstmal.

ok hab was vergessen: es werden mit der Zeit mehr und weniger divs im kartenstapeldiv.
dadurch kann ich gut mit appendChild arbeiten. Außerdem kann man die divs auch mit drap/drop verschieben. deshalb habe ich mich gegen eine tabelle entschieden.
Aber jetzt wird das erste links und das das letzte div ganz rechts angezeigt. das ergibt schwerpunktmäßig vielleicht eine zentrieung ist aber nicht meine absicht

Das clear:both; funktioniert perfekt. I-wie ist mir das entfallen.

[Jockelx]

Okay, jetzt sehe ich erst, was du wirklich willst.

Keine Ahnung wie du das ausschliesslich mit div's machen kannst; mit einer Tabelle drum herum würde es so gehen:
(Zugegeben nicht super-schön, aber das Hinzufügen von div's geht ohne Probleme)

<table width="100%">
  <tr>
    <td></td>
    <td style='width:300px;' >
      <div>
          <div style='float:left; width:100px; height:100px;'>
              Text
          </div>
      </div>
      <div style='float:left;'>
          <div style='float:left; width:100px; height:100px;'>
              Text
          </div>
      </div>
      <div style='float:right;'>
          <div style='float:left; width:100px; height:100px;'>
              Text
          </div>
      </div>
    <td></td>
  <tr>
</table>

[PRIEST]

du brauchst eine feste größe für den zu zentrierenden container. Der hat sonst 100% und ist somit zentriert.

2 Beispiele einmal mit liste einmal nur mit div:

List:

<div style="border: 1px solid red;width:100%;">
	<ul style="list-style:none; width:306px; margin:0 auto; padding:0; border: 1px solid blue;">
        <li style="float:left; display: block; margin:0; width:100px;  height:100px; border: 1px solid green;">
            Ich bin das ursprünglich 2te div
        </li>
        <li style="float:left; display: block; margin:0; width:100px;  height:100px; border: 1px solid green;">
            Text
	</li>
        <li style="float:left; display: block; margin:0; width:100px;  height:100px; border: 1px solid green;">
            Text
        </li>
	<li style="clear:both;"></li>
	</ul>
</div>

Divs:

<div style="border: 1px solid red;width:100%;">
	<div style="width:306px; margin:0 auto; border: 1px solid blue;">
        <div style="float:left; display: block; margin:0; width:100px;  height:100px; border: 1px solid green;">
            Ich bin das ursprünglich 2te div
        </div>
        <div style="float:left; display: block; margin:0; width:100px;  height:100px; border: 1px solid green;">
            Text
	</div>
        <div style="float:left; display: block; margin:0; width:100px;  height:100px; border: 1px solid green;">
            Text
        </div>
	<div style="clear:both;"></div>
	</div>
</div>

width:306px muss sein wegen (3*100px) + 3*2(1px breitem border). Wenn es genau ineinander passen soll.

Grüße

[Gustl]

hallo,
wozu so viele divs?

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Div Layout</title>
<style>

#kartensammlung {
   margin: 0 auto;
   width:  300px;
/* text-align: center; */ 
}

.divs {
   float:  left;
   width:  100px; 
   height: 100px;
}

</style>
</head>
<body>
<div id="kartensammlung">
        <div class="divs">
            Text
        </div>

        <div class="divs">
            Text
        </div>

        <div class="divs">
            Text
        </div>
    <br />
<div id='anderesDiv' style='clear:both'>Noch ein Text</div>
</div>

</body>

[PRIEST]

wieso so viele?
Du hast doch nur 1 div weniger als ich. Ich habs halt nochmal gruppiert

[Gustl]

eins zuviel.

[DerBaer]

oha, irgendwie hat meine Antwort den Weg hierher nicht gefunden.

Danke nochmal für eure Antworten. Ich hab jetzt PRIESTs Version mit den Divs angewendet(aber ohne das zusätzliche div;) ). Damit funktioniert das jetzt wunderbar.

Allerdings sorgt vermutlich das "float: left;" dafür, dass ich mit offsetLeft nicht die richtigen Werte(sondern immern 0) erhalte. Lässt sich dieses Problem umgehen? (Ich brauche die Position, damit ich beim DragDrop die Maus immer über dem Div habe und nicht wie momentan das Div wesentlich weiter links mitfährt.

Mfg