[Erledigt] Float bei zwei DIVs

27.01.2006, 21:56

Abend, weiß gerade gar nicht weiter. Eigentlich das einfachste auf der Welt - zwei DIVs mit Hilfe von float nebeneinander packen. Problem: Links ist ein DIV mit float: left, daneben ein anderes, das halt daneben dargestellt werden soll.

Code:

<html>
    <head>
        <title>
             Titel
        </title>
        <link rel="stylesheet" type="text/css" href="format.css" />
    </head>
    <body>
        <div class="navigation">
            Navigation
        </div>
        <div class="hauptteil">
            Hauptteil
        </div>
    </body>
</html>

Code:

body
{
    background-color: #9BA9BD;
    padding: 10px;
    font-family: Verdana;
    font-size: 12px;
    cursor: default;
}

.navigation
{
    /*background-color: #D9D5CA;*/
    width: 151px;
    border-color: black;
    border-width: 1px;
    border-style: solid;
    height: 350px;
    float: left;
    margin: 0;
}

.hauptteil
{
    /*background-color: #EEEEE9;*/
    border-color: black;
    border-width: 1px;
    border-style: solid;
    margin: 0;
}

Nur der rechte DIV geht über die ganze Seite (also unter dem linken hindurch). Jetzt könnte ich dem ja ein margin-left zuweisen, aber da prügeln sich FF und IE (*GNAA*). IE stellt das immer zu weit weg dar, ham da irgendwie andere Vorstellungen -.-.

Stichworte: -

Forumsgast

Dabei seit: 11.10.2005

Beiträge: 2418
#2

28.01.2006, 08:04

ehm.. ich weiss nicht wirklich was du machen willst, aber wenn ich diesen Code bei mir teste, sind sie nebeneinander und es geht kein DIV unter den "links" durch..

(weder im IE noch im FF)
Kommentar
#3

28.01.2006, 10:44

Bei mir sieht das so aus, Hauptteil ist unter Navigation:
Kommentar
Forumsgast

Dabei seit: 11.10.2005

Beiträge: 2418
#4

28.01.2006, 10:49

Zitat von Michigras

Bei mir sieht das so aus, Hauptteil ist unter Navigation:

Hauptteil ist doch neben navigation ^o) wenn du den background-color wieder den Kommentar wegnimmst, und mit dem z-index nachschaust ist der Hauptteil doch rechts von der Navi..

*verwirt*
Kommentar

28.01.2006, 10:50

Jaja, aber wenn ich z.B. width: 600px; beim Hauptteil mache, ist die Navigation im Hauptteil drinn. Aber die soll immer links daneben bleiben!

Code:

body
{
    background-color: #9BA9BD;
    font-family: Verdana;
    font-size: 12px;
    cursor: default;
}

.navigation
{
    background-color: #D9D5CA;
    border-color: black;
    border-width: 1px;
    border-style: solid;
    float: left;
    width: 150px;
    height: 300px;
}

.hauptteil
{
    background-color: #EEEEE9;
    border-color: black;
    border-width: 1px;
    border-style: solid;
    height: 600px;
}

So z.B..

So solls sein:

Kommentar

Forumsgast

Dabei seit: 11.10.2005
Beiträge: 2418

28.01.2006, 11:07

http://tut.php-q.net/frames.html

css(page.css):

Code:

#links {
    width: 30%;
    float: left;
	 background-color: Aqua;
}
#mitte {
    width: 69%;
    float:left;
	 background-color: Fuchsia;
	 height: 600px;
}

html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Meine Seite</title>
        <link rel="stylesheet" type="text/css" href="page.css" />
        <meta http-equiv="Content-Type"
                        content="text/html; charset=ISO-8859-1" />
    </head>
    <body>
        <div id="root">
            <div id="links">
                Hier kommt ein Menu hin
            </div>
            <div id="mitte">
                Hier werden dann die Daten geladen, wie News
                oder Memberliste.
            </div>
            <br style="clear:both;" />

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

Ausgabe (im FF):

<- klick

Kommentar

#7

28.01.2006, 11:24

Bei mir gibt der das untereinander aus... oh man

Der IE stellt es übrigens mehr oder weniger so dar, wie ich es will. Links die Navi, rechts der Inhalt, allerdings mit ca. 5px Rand, warum auch immer. Margin ist auf 0.

EDIT: Ich machs gleich mit Tabellen
Kommentar
Forumsgast

Dabei seit: 11.10.2005

Beiträge: 2418
#8

28.01.2006, 11:40

Zitat von Michigras

Bei mir gibt der das untereinander aus... oh man

Der IE stellt es übrigens mehr oder weniger so dar, wie ich es will. Links die Navi, rechts der Inhalt, allerdings mit ca. 5px Rand, warum auch immer. Margin ist auf 0.

EDIT: Ich machs gleich mit Tabellen

dann mach mal einfach die ganze seite ein wenig kleiner.

kannst ja dem root ein width geben..

im IE sah dein Code bei mir auch gut aus, aber im FF ned wirklich

also dieser Code geht bei mir einwandfrei..
Kommentar
#9

28.01.2006, 11:47

Jetzt merke ich gerade, dass der IE Bilder anders darstellt als der FF, im IE ist das png-Bild dunkler (wollte so einen Farbverlauf). Heute ist ein §$()-Tag.
Kommentar
Forumsgast

Dabei seit: 11.10.2005

Beiträge: 2418
#10

28.01.2006, 12:04

öhm, bei mir ist es gleich..

benuzt halt web-farben, die sollten auf allen Systemen gleich sein..
Kommentar
#11

28.01.2006, 12:07

Hab jetzt eine ganz gute Lösung gefunden... der Navi width: 150px gegeben, dem DIV daneben margin-left: 151px. Dann sind die genau nebeneinander, im IE ist ein 2px breiter Rand (da würd es mit width: 149px perfekt aussehen -.-).
Kommentar
Forumsgast

Dabei seit: 11.10.2005

Beiträge: 2418
#12

28.01.2006, 12:11

so kann man das natürlich auch machen.

na ja hauptsache du bist zufireden.
Kommentar
Forumsgast

Dabei seit: 08.02.2005

Beiträge: 224
#13

28.01.2006, 22:06

Zitat von Michigras

Jetzt merke ich gerade, dass der IE Bilder anders darstellt als der FF, im IE ist das png-Bild dunkler (wollte so einen Farbverlauf). Heute ist ein §$()-Tag.

Der IE hat fette Probleme mit PNGs..... Davon kann ich ein Lied singen.
Kommentar
#14

28.01.2006, 22:38

Hm. Wär das mit JPG gegangen?
Kommentar
Forumsgast

Dabei seit: 13.11.2005

Beiträge: 2579
#15

29.01.2006, 09:54

Ich würde zunächst einmal so vorgehen, dass du margin und padding explizit auf 0 setzt. Anschließend solltest du sichergehen, dass der IE bei der Darstellung deiner Seite nicht in den Quirksmode springt, da er dort [url=http://css4you.de/wsboxmodell/index.html#browser]das Boxmodell [ ein wenig anders als standardkonforme Browser interpretiert.
Kommentar

Ankündigung

[Erledigt] Float bei zwei DIVs

Neue Werbung 2019