Divs mit "float" richtig anpassen

[zer02288]

Hallo Leutz,

ich hab ne Seite auf der ich gleich große Divs hab die alle der Bildschirmauflösung passend verteilt werden. Wenn man einen anklickt soll er größer werden um mehr Inhalt anzeigen zu können. Der "große" Div sorgt aber dafür das sich die anderen nicht mehr auf der linken Seite verteilen.

Nun das Problem, wie bekomm ich die speziellen Divs ganz nach links und folgend (sieh Bild)?




(CSS: boxopen ist die große Box )

#box{
    margin-left:15px;
    margin-top:15px;
    width:230px;
    height:200px;
    background:url(../pix/box.png) no-repeat left top;
    float:left;
}

#boxopen{
    width:720px;
    height:auto;
    margin-left:15px;
    margin-top:15px;
    background:#F00;
    float:left;
}

THX für jede Hilfe

 

[MyBad]

AW: Divs mit "float" richtig anpassen

Hi.

Könntest du noch dein HTML-MArkup posten. So kann dir leider keiner helfen.

Ich rate aber dennoch mal drauf los:
Du müsstest eine linke und eine rechte Spalte definieren.
Links kommen dann die kleinen DIV-Container rein und rechts der Große.

 

[zer02288]

AW: Divs mit "float" richtig anpassen

Das mit den Spalten geht nicht da der große Div mal rechts und mal links stehen kann.
Im Prinzip soll der große Div ein angeklickten kleinen Div darstellen. Dadurch kann er mal rechts oder mal links stehen.
Ist alles noch in Bauphase

<div class="content">
        <div id="box">
            <img src="pix/test.jpg" alt="ZEROENNA Portfolio" id="boxpix" />
            <p id="boxtext">Project Master "Sweat"</p>
            <p id="boxtext2">Short Descript or Underline</p>
        </div>
        <div id="boxopen">
            <img src="pix/test2.jpg" alt="ZEROENNA Portfolio" id="boxopenpix" />
            <p id="boxtext3">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem     
            ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem 
            ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem 
            ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem 
            ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem</p>
        </div>
        <div id="box">
        </div>
        <div id="box">
        </div>
        <div id="box">
        </div>
        <div id="box">
        </div>
    </div>

Hier mal ein Beispiel für die Funktionsweise und Anordnung der Divs

 

[molly_68]

AW: Divs mit "float" richtig anpassen

Sowas ist doch am leichtesten mit einer pop-up box oder lightbox zu lösen, denke ich mal so...

 

[zer02288]

AW: Divs mit "float" richtig anpassen

Daran hatte ich auch schon gedacht aber ich wollte es vermeiden eine pop-up box zu haben. es sollte sich möglichst alles auf der einen seite abspielen. (ich hoffe ihr versteht mich )

 

[CayZ]

AW: Divs mit "float" richtig anpassen

Naja, aber ich denke mal das es mit einem Jawa-script gelöst wurde...schau doch einfach mal in den Quelltext und google dann die java scripts vllt findest du ja was passendes...