float nur für ein elebemt aufheben?

lonelyhawk · 07.06.2009

hej,

habe ein problem mit css und komm gerade nicht weiter.

hab ein drei spalten layout. naivgation | content | sidebar

navigation hat die eigenschaft display:inline; und float:left;
content und sidebar sind position:relative;
sidebar floatet 'right'

also:

HTML:

#navigation{
        margin-left:80px;
        width:233px;
        height:597px;
        background:transparent url('navigation.png') no-repeat;
        float:left;
        display:inline;
}
#content{
        position:relative;
        padding:15px;
        margin:0 260px 0 313px;
        min-height:597px;
        height:auto !important; 
        height:597px;

}
#sidebar{
        position:relative;
        width:250px;
        margin-left:10px;
        min-height:700px; 
        height:auto !important;
        height:700px;
        float:right;
        background:transparent url('sidebar.png') no-repeat;
        font-size:11px;
}

das funktioniert auch alles wie es soll. aber nun möchte ich als content neben einen absatz <p></p> ein bild einfügen. würde ich normal mit float machen und dem nächsten absatz dann ein clear:both; bzw. clear:right geben. Wenn ich das aber mache, springt der absatz im content-div nach unten bis er das ende (700px) meiner sidebar erreicht hat. ist auch logisch, weil diese float:right; als eigenschaft hat, ich das aber im absatz aufgehoben habe.

also wie bekomme ich jetzt mein bild neben den text? kann mir da jemand helfen? (tabelle und ähnliche späße sind keine lösung

)

leohh · 07.06.2009

AW: float nur für ein elebemt aufheben?

Du moechtest innerhalb deiner Contentarea ein Bild neben einem Absatz plazieren?!
Soweit richtig?

Im Regelfall, duerfte sich das float, gar nicht auf die Inhalte deines Contentbereichs auswirken. Ich denke aber ich hab es falsch verstanden. Eine Skizze oder eine LiveSeite bzw. ein bisschen HTML wuerde zur besseren Veranschaulichung deines Problems dienen.

Jormungand · 07.06.2009

AW: float nur für ein elebemt aufheben?

wenn im Quelltext der Content nach Navigation und Sidebar kommt, sollte es ihm ja egal sein.
Sind die Container vielleicht verschachtelt?

sloshed · 07.06.2009

AW: float nur für ein elebemt aufheben?

Hallo,

wenn du die Grafik im Content vor das <p>-Tag setzt und mit einem float:right versiehst, funktioniert das.

Grüße

kleinerOnkel · 07.06.2009

AW: float nur für ein elebemt aufheben?

ich denke das passiert, weil nicht genug Platz in der Breite da ist.

sloshed · 07.06.2009

AW: float nur für ein elebemt aufheben?

Die Breite ist bei einer Floatenden Grafik im Content eher unrelevant.

lonelyhawk · 08.06.2009

AW: float nur für ein elebemt aufheben?

leohh schrieb:
Du moechtest innerhalb deiner Contentarea ein Bild neben einem Absatz plazieren?!
Soweit richtig?

richtig.

leohh schrieb:
Im Regelfall, duerfte sich das float, gar nicht auf die Inhalte deines Contentbereichs auswirken. Ich denke aber ich hab es falsch verstanden. Eine Skizze oder eine LiveSeite bzw. ein bisschen HTML wuerde zur besseren Veranschaulichung deines Problems dienen.

ok, das html ist unspektakulär aber vielleicht hilft es:

HTML:

<!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>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
    <title>Untitled 2</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="frame">
<div id="wrapper">
    <div id="navigation">
        [die navigation]
    </div>

    <div id="sidebar">
        [inhalt der sidebar]
    </div>

    <div id="content">

        <img src="" /> <!-- dieses Bild soll rechts vom text erscheinen -->
        <p>text</p> <!-- das ist der text -->
        <p>der Absatz soll nicht mehr mit neben dem Bild sein!</p> <!-- das ist das problem! -->

    </div>
<div style="clear:left;"></div>

</div>
</div>
</body>
</html>

Jormungand schrieb:
wenn im Quelltext der Content nach Navigation und Sidebar kommt, sollte es ihm ja egal sein.

ja der content kommt nach navigation und sidebar. trotzdem springt der inhalt von content wenn ich das clear:right; nutze.

Jormungand schrieb:
Sind die Container vielleicht verschachtelt?

inwiefern verschachtelt? um die drei container sind noch zwei außen herum. eine weitere verschachtelung gibt es nicht.

sloshed schrieb:
Hallo,

wenn du die Grafik im Content vor das <p>-Tag setzt und mit einem float:right versiehst, funktioniert das.

Grüße

ja, ABER alles was ich an inhalt darunter setze floatet mit. und genau das will ich verhindern. wenn ich aber dem nächsten absatz im contentbereich ein clear:right; gebe, springt dieser absatz im content-div nach unten (auf höhe des endes des sidebar-divs).

kleinerOnkel schrieb:
ich denke das passiert, weil nicht genug Platz in der Breite da ist.

nein

Bigmemo · 08.06.2009

AW: float nur für ein elebemt aufheben?

Hallo,
was spricht dagegen den img im content direkt zu formatieren...durch zusätzliche klassen könnte man sogar einzeln ansprechen...

cu
Bigmemo

sloshed · 08.06.2009

AW: float nur für ein elebemt aufheben?

Es funktioniert das so wie beschrieben.

HTML:

<!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>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
<title>Untitled 2</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <style type="text/css">
<!--
#navigation{
        margin-left:80px;
        width:233px;
        height:597px;
        background:transparent url('navigation.png') no-repeat;
        float:left;
        display:inline;
}
#content{
        position:relative;
        padding:15px;
        margin:0 260px 0 313px;
        min-height:597px;
        height:auto !important; 
        height:597px;

}
#sidebar{
        position:relative;
        width:250px;
        margin-left:10px;
        min-height:700px; 
        height:auto !important;
        height:700px;
        float:right;
        background:transparent url('sidebar.png') no-repeat;
        font-size:11px;
}
-->
    </style>
</head>

<body>
<div id="frame">
    <div id="wrapper">
        <div id="navigation"> [die navigation] </div>
        <div id="sidebar"> [inhalt der sidebar] </div>
        <div id="content"> <img src="" width="100" height="100" style="float:right" />
            <!-- dieses Bild soll rechts vom text erscheinen -->
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat  volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation  ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse  molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero  et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril  delenit augue d</p>
            <!-- das ist der text -->
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat  volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation  ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse  molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero  et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril  delenit augue d</p>
            <!-- das ist das problem! -->
        </div>
        <div style="clear:left;"></div>
    </div>
</div>
</body>
</html>

Also bei mir geht das so.

lonelyhawk · 08.06.2009

AW: float nur für ein elebemt aufheben?

Bigmemo schrieb:
Hallo,
was spricht dagegen den img im content direkt zu formatieren...durch zusätzliche klassen könnte man sogar einzeln ansprechen...

cu
Bigmemo

nichts, das img ist auch per css definiert. ich habe oben nur die struktur des html gepostet und die klassen dabei weggelassen, weil es unwichtig ist. das das img die eigenschaft float:right; hat, hatte ich ja schon geschrieben. das ist aber auch nicht relevant, das floaten des bildes klappt ja. ich möchte nur DANACH das float wieder aufheben. und das geht halt nicht ohne das auch das float für meine sidebar aufgehoben wird...

lonelyhawk · 08.06.2009

AW: float nur für ein elebemt aufheben?

sloshed schrieb:
Es funktioniert das so wie beschrieben.

HTML:

Also bei mir geht das so.

kürz mal die texte... dann wirst du sehen, dass der zweite absatz wieder mit neben das bild foatet. und genau das ist mein problem.

Rakete · 08.06.2009

AW: float nur für ein elebemt aufheben?

Du solltest nicht "postion:relative" mit Floats mischen, das verwirrt den Browser, weil beides unterschiedliche Wege sind, Block-Elemente zu positionieren.

Wenn du ein gefloatetets Elemtent in einem nicht gefloateten Elternelement platzierst, fließt das gefloatete aus dem Eltern-Element heraus. Floating ist wie absolute Positionierung, vom "normalen" Dokumentfluß abgelöst.

Eine Angabe wie "display:inline" kannst du dir sparen, wenn du das betreffende Element floatest, weil float eine Blockdarstellung erzwingt.

Wenn du also deine drei Spalten schon floatest, kannst du innerhalb weiterfloaten (

) und clearen wie du lustig bist.

Code:

#wrapper {
        float:left;
        width:800px;
        margin:1px auto;
        padding:0px;
}

#navigation{
        float:left;
        width:233px;
        height:597px;
        margin:0px;
        padding:0px;
}

#content{
        float:left;
        width:507px;
        height:597px;
        margin:0px 10px;
        padding:15px;
}

#sidebar{
        float:left;
        width:250px;
        height:597px;
        margin: 0px

}

Das sollte dir dein 3-Spalten Layout so darstellen, so dass du im Content-Div weiterfloaten kannst. Die Gesamtbreite ist jetzt auf 800px eingestellt, kannst du ja anpassen wie du willst.

Ich habe riesigen margin-Ränder der drei Splaten entfernt und statt dessen deinen Wrapper-Div zentriert.

Beachte nur:
- Es muss in der Breite genug Platz sein, um alle Spalten nebeneinander darzustellen, sonst ruscht das Ganze nach unten auseinander.
- Dieses Beispiel funktioniert nur in Browsern, die keinen Box-Modell Fehler haben. Für die Darstellung im IE6 benötigst du einen CSS-Hack, um Breiten bzw. Ränder anzupassen.

Edit:
Die Breite im content-Div war falsch

lonelyhawk · 08.06.2009

AW: float nur für ein elebemt aufheben?

Rakete schrieb:
Du solltest nicht "postion:relative" mit Floats mischen, das verwirrt den Browser, weil beides unterschiedliche Wege sind, Block-Elemente zu positionieren.

Wenn du ein gefloatetets Elemtent in einem nicht gefloateten Elternelement platzierst, fließt das gefloatete aus dem Eltern-Element heraus. Floating ist wie absolute Positionierung, vom "normalen" Dokumentfluß abgelöst.

Eine Angabe wie "display:inline" kannst du dir sparen, wenn du das betreffende Element floatest, weil float eine Blockdarstellung erzwingt.

Wenn du also deine drei Spalten schon floatest, kannst du innerhalb weiterfloaten () und clearen wie du lustig bist.

Code:

#wrapper { float:left; width:800px; margin:1px auto; padding:0px; } #navigation{ float:left; width:233px; height:597px; margin:0px; padding:0px; } #content{ float:left; width:507px; height:597px; margin:0px 10px; padding:15px; } #sidebar{ float:left; width:250px; height:597px; margin: 0px }

Das sollte dir dein 3-Spalten Layout so darstellen, so dass du im Content-Div weiterfloaten kannst. Die Gesamtbreite ist jetzt auf 800px eingestellt, kannst du ja anpassen wie du willst.

Ich habe riesigen margin-Ränder der drei Splaten entfernt und statt dessen deinen Wrapper-Div zentriert.

Beachte nur:
- Es muss in der Breite genug Platz sein, um alle Spalten nebeneinander darzustellen, sonst ruscht das Ganze nach unten auseinander.
- Dieses Beispiel funktioniert nur in Browsern, die keinen Box-Modell Fehler haben. Für die Darstellung im IE6 benötigst du einen CSS-Hack, um Breiten bzw. Ränder anzupassen.

Edit:
Die Breite im content-Div war falsch

danke für di mühe. allerdings funktioniert dein vorschlag so nur mit einer festen breite. ich brauche aber einen dynamischen contentbereich mit der breite von ~400px bis undendlich. dafür habe ich bis jetzt keine andere lösung gefunden. bei einer fixen breite wäre das ganze kein problem...

Rakete · 08.06.2009

AW: float nur für ein elebemt aufheben?

Das funktioniert auch mit Prozentangaben. Ist nur schwieriger auszurichten, ohne dass etwas von deinen Spalten umgebrochen wird.

Das wichtigste an dem Beitrag war:
Das Floaten muss in der obersten Ebene beginnen, dann klappt's auch in der untersten!

lonelyhawk · 08.06.2009

AW: float nur für ein elebemt aufheben?

Rakete schrieb:
Das funktioniert auch mit Prozentangaben. Ist nur schwieriger auszurichten, ohne dass etwas von deinen Spalten umgebrochen wird.

das ist nicht nur schwierig, sondern schlicht unmöglich, wenn man 'extreme' browsergrößen (gross/klein) berücksichtigen möchte. ich fände width:200px+10%; oder sowas toll. leider klappt das so nicht.

Rakete schrieb:
Das wichtigste an dem Beitrag war:
Das Floaten muss in der obersten Ebene beginnen, dann klappt's auch in der untersten!

das hab ich ausprobiert, ohne erfolg, das clear sorgt immer noch für den sprung nach unten.

wenn ich die feste höhe der sidebar wegnehme und deren inhalt lösche, klappt alles, aber sobald ich wieder inhalt in die sidebar schreibe rutscht der absatz mit clear:right; immer so weit nach unten bis er am ende des inhalts der sidebar angekommen ist.

Rakete · 08.06.2009

AW: float nur für ein elebemt aufheben?

Ich habe dein Beispiel so getestet (den frame-Div raus und die Reihenfolge von Content und Sidebar vertauscht)

So wird es mit Prozentwerten korrekt angezeigt und das Textabsatz-Floating funktioniert wie gewünscht (IE7 und FF3). Allerdings entspricht die Summe der Prozentwerte in der Breite nicht 100%, das meinte ich mit schwieriger.
An den Farbflächen kannst du sehen, dass es sich mit der Fenstergröße verändert und trotzdem korrekt gefloatet ist.

Code:

<!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>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
    <title>Untitled 2</title>
    <style type="text/css">
    #wrapper {
        float:left;
        width:100%;
        margin:1% auto;
        padding:0px;
    }

    #navigation{
            float:left;
            width:24%;
            height:597px;
            margin:0px;
            padding:0px;
            background-color:red;
    }

    #content{
            float:left;
            width:47%;
            height:597px;
            margin:0 1%;
            padding:15px;
            background-color:green;
    }

    #sidebar{
            float:left;
            width:24%;
            height:597px;
            margin: 0px;
            background-color:red;

    }
    
    </style>
</head>

<body>


<div id="wrapper">
    <div id="navigation">
        [die navigation]
    </div>
   

    <div id="content">

        <img src="" style="float:right" width="100" height="300"/> <!-- dieses Bild soll rechts vom text erscheinen -->
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat  volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation  ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse  molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero  et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril  delenit augue d</p>
            <!-- das ist der text -->
            <p style="clear:both;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat  volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation  ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse  molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero  et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril  delenit augue d</p>
            <!-- das ist das problem! -->


    </div>
    
    <div id="sidebar">
        [inhalt der sidebar]
    </div>

</div>

</body>
</html>

Extreme Browsergrößen?
Vielleicht solltest du nicht zu große Brötchen backen, ein Layout, das sowohl auf einem Handy-Display als auch auf einem 30'' Monitor gut aussieht und dreispaltig ist, gibt es meiner Meinung nach nicht.

lonelyhawk · 08.06.2009

AW: float nur für ein elebemt aufheben?

Rakete schrieb:
Ich habe dein Beispiel so getestet (den frame-Div raus und die Reihenfolge von Content und Sidebar vertauscht)

So wird es mit Prozentwerten korrekt angezeigt und das Textabsatz-Floating funktioniert wie gewünscht (IE7 und FF3). Allerdings entspricht die Summe der Prozentwerte in der Breite nicht 100%, das meinte ich mit schwieriger.
An den Farbflächen kannst du sehen, dass es sich mit der Fenstergröße verändert und trotzdem korrekt gefloatet ist.

Code:

(...)

die sidebar springt schon bei einer breite von 895px nach unten.

Rakete schrieb:
Extreme Browsergrößen?

Vielleicht solltest du nicht zu große Brötchen backen, ein Layout, das sowohl auf einem Handy-Display als auch auf einem 30'' Monitor gut aussieht und dreispaltig ist, gibt es meiner Meinung nach nicht.

mir geht es nicht ums handy aber das design soll weder auf 640x480px (wenn auch mit scrollbalken) noch bei 2560x1600px zerfetzt werden.

hab nochmal ein komplettes beispiel, woran man das problem gut erkennen kann.

das htm:

HTML:

<!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>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
    <title>Untitled 2</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="frame">
<div id="navigation">
        <p class="ski"><a href="index.php">Startseite</a> | <a href="kontakt.php">Kontakt</a> | <a href="impressum.php">Impressum</a></p>
        <ul class="navi">
            <li>&raquo; <a href="xxx.php">xxx</a></li>
            <li class="hereur">&raquo; <a href="xxx.php">xxx</a></li>

            <li>&raquo; <a href="xxx.php">xxx</a></li>
            <li>&raquo; <a href="xxx.php">xxx</a></li>
            <li>&raquo; <a href="xxx.php">xxx</a></li>
            <li>&raquo; <a href="xxx.php">xxx</a></li>
        </ul>

</div>

<div id="sidebar">
        <p class="erste_adresse">
            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
        <p class="adressen">
            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
        <p class="adressen">
            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>

        <p class="adressen">
            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
        <p class="adressen">
            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
</div>

<div id="content">

        <h1>headline</h1>
        <h2>headline 2</h2>
        <img src="bild.jpg" alt="xxx" title="xxx" style="float:right;width:120px;height:120px;" />
        <p class="absatz">
             At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
        <p class="absatz">
             At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
        <p style="clear:right;"> <!-- ab hier soll nichts mehr floaten -->
             At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>        

        <img src="bild.jpg" alt="xxx" title="xxx" style="float:right;width:120px;height:120px;" />
        <p class="absatz">
             At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
        <p class="absatz">
             At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
        <p style="clear:right;"> <!-- ab hier soll nichts mehr floaten -->
             At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
        

        <img src="bild.jpg" alt="xxx" title="xxx" style="float:right;width:120px;height:120px;" />
        <p class="absatz">
             At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
        <p class="absatz">
             At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
        <p style="clear:right;"> <!-- ab hier soll nichts mehr floaten -->
             At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
</div>
</div>
</body>
</html>

und das CSS

HTML:

* {
    padding:0;
    margin:0;
}
body {
    width:100%;
    background:#ffffff url('body_bg.png') repeat-x;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    letter-spacing:0.2pt;
    line-height:150%;
    font-size:11px;
    color:#000000;
}
#frame{
        width:100%;
        min-width:1000px;
        margin: 0 auto;
}
#navigation{
        margin-left:80px;
        width:233px;
        height:597px;
        background:transparent url('navigation.png') no-repeat;
        float:left;
}
#content{
        padding:15px;
        margin:0 260px 0 313px;
}
#sidebar{
        position:relative;
        width:250px;
        margin-left:10px;
        float:right;
        background:transparent url('sidebar.png') no-repeat;
        font-size:11px;
}

kleinerOnkel · 09.06.2009

AW: float nur für ein elebemt aufheben?

nimm mal die "clear right" anweisungen aus deinem html.

kleinerOnkel · 09.06.2009

AW: float nur für ein elebemt aufheben?

probiere es mal mit dem html....
vielleicht ist es das ja, was Du meinst!

HTML:

<!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>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
    <title>Untitled 2</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="frame">

<div id="sidebar">
        <p class="erste_adresse">
            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
        <p class="adressen">
            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
        <p class="adressen">
            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>

        <p class="adressen">
            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
        <p class="adressen">
            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
</div>


<div id="navigation">
        <p class="ski"><a href="index.php">Startseite</a> | <a href="kontakt.php">Kontakt</a> | <a href="impressum.php">Impressum</a></p>
        <ul class="navi">
            <li>&raquo; <a href="xxx.php">xxx</a></li>
            <li class="hereur">&raquo; <a href="xxx.php">xxx</a></li>

            <li>&raquo; <a href="xxx.php">xxx</a></li>
            <li>&raquo; <a href="xxx.php">xxx</a></li>
            <li>&raquo; <a href="xxx.php">xxx</a></li>
            <li>&raquo; <a href="xxx.php">xxx</a></li>
        </ul>

</div>

<div id="content">
        <h1>headline</h1>
        <h2>headline 2</h2>
        <img src="bild.jpg" alt="xxx" title="xxx" style="float:right;width:120px;height:120px;" />
        <p class="absatz">
             At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
        <p class="absatz">
             At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
        <p class="absatz"> <!-- ab hier soll nichts mehr floaten -->
             At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>        
	</br></br>
        <img src="bild.jpg" alt="xxx" title="xxx" style="float:right;width:120px;height:120px;" />
        <p class="absatz">
             At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
        <p class="absatz">
             At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
        <p class="absatz"> <!-- ab hier soll nichts mehr floaten -->
             At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
        </br></br>
        <img src="bild.jpg" alt="xxx" title="xxx" style="float:right;width:120px;height:120px;" />
        <p class="absatz">
             At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
        <p class="absatz">
             At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
        <p class="absatz"> <!-- ab hier soll nichts mehr floaten -->
             At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
</div>
</div>
</body>
</html>

lonelyhawk · 09.06.2009

AW: float nur für ein elebemt aufheben?

kleinerOnkel schrieb:
probiere es mal mit dem html....
vielleicht ist es das ja, was Du meinst!

HTML:

html code

im prinzip ja... mit der textmenge und derzeit durchschnittlichen auflösungen. wenn man aber die texte kürzt, bzw. die auflösung erhöht, rücken die absätze untereinander ein...

hab es jetzt erstmal provisorisch mit div-boxen gelöst. aber schön ist das nicht. wenn also noch jemand nen vorschlag hat, bin ich weiterhin interessiert.