CSS; Problem mit float

AngiWaters

Huhu!

Ich versuche grade mein Layout von Tabllenstruktur in Container umzubauen und werde nicht so ganz fertig mit dem float. Im iex sind die container immer untereinander und im FF ist alles total überlagert. Der Link: Angi’s World » Codeschnipsel

CSS habe ich so formatiert:

Code

.codetext {
 padding: 20px;
 float: left;
 width: 250px;
 height: 50px;
 display: inline;
}
.codeblock {
 padding: 20px;
 width: 250px;
 float: right;
 height: 50px;
 display: inline;
}
.codebreak {
 clear: both;
}

Alles anzeigen

Was habe ich falsch gemacht? :confused:

LG, Angi

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Monika

vielleicht hilft Dir das

pre und overflow auto

und jedes FLoat musst Du wieder *clearen*

sonst verläuft sich alles irgendwie ....

lg

AngiWaters

hmm, pre ist also sozusagen auch eine textarea?

ge-cleart habe ich immer nach den beiden blöcken text und code per eigenem div (breaker) und dachte das müsste eigentlich hinhauen... klappet aber nicht. :(

Ich werds mal versuchen mit pre :) danke!

Edit: Hmm, wenn ich das float right wegnehme siehts im iex fast richtig aus... im FF aber immer rnoch vermurkst. Das ist ja zum Mäusemelken ;)

Olafb

Das ist aber ganz übeles Zeug was du den Leuten da zeigst :evil:
eigentlich dürfte man das nicht unterstützen ;)

Ich würds so machen:

HTML

.codebox{
clear:left;
margin:20px;
}
.codebox pre{
border : 1px solid #DCDCDC;
float:left;
height:200px;
padding :3px 6px;
margin:0 20px 10px 0;
overflow:auto;
width:250px;
}




    <div class="codebox">
      <h2>
        1. Wackelnder Browser
      </h2>
      <pre>
&lt;script language="javascript1.2"&gt;
wackel();
function wackel() {
for (i = 6; i &gt; 0; i--) {
for (j = 6; j &gt; 0; j--) {
parent.moveBy(0,i);
parent.moveBy(i,0);
parent.moveBy(0,-i);
parent.moveBy(-i,0);
} } }
&lt;/script&gt;
</pre>
      <p>
        Dieses Javascript bringt deinen Browser zum Wackeln! Der Code muss im
        Head-Bereich des Quelltextes plaziert werden.
      </p>
      <p>
        <a href="wackeln.php"><img src=
        "http://www.angis-world.de/bilder/demo.gif" alt="Demo" border="0"
        height="28" width="76" /></a>
      </p>
    </div>

Alles anzeigen

AngiWaters

Ja ich weiß, ist aber genau das Zeug was die Mädels die auf meine HP kommen toll finden. ;) Drum lass ich es drauf. Es war schonmal runter, da bekam ich dann emails dass ich es doch bitte wieder rauf tun soll. Das kommt davon wenn meine eine rosa hello kitty hp macht...

Aber back top topic. FF macht es nun richtig :) vielen Dank mal wieder lieber Olaf! Nur der IE spinnt wegen dem zweiten pre bei 2. herum. Oder soll ich das einfach in das erste pre mit reinsetzen *grübel* nur wie mach ich dann deutlich dass es sich um zwei verschiedene codes handelt die an verscheidene stellen gehören?

Edit: Kann man die pre boxen auch unterschiedlich groß machen?

Olafb

Das klappt nun wohl inzwischen? Ich kann nix entdecken...

Unterschiedliche PRE:

HTML

.codebox pre{
border : 1px solid #DCDCDC;
float:left;
height:200px;
padding :3px 6px;
margin:0 20px 10px 0;
overflow:auto;
width:250px;
}
.codebox pre.blub{
height:300px;
width:350px;
}




    <div class="codebox">
      <h2>
        1. Wackelnder Browser
      </h2>
      <pre class="blub">
........

Alles anzeigen

AngiWaters

Vielen Dank großer Nagus! Das hat geklappt. Nun ist alles so wie ich es haben möchte. *freu* :-D

Willkommen! Melden Sie sich an oder registrieren Sie sich.

CSS; Problem mit float

Jetzt mitmachen!