Float bei zwei DIVs

27.01.2006, 22: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 -.-.

dsmcg · 28.01.2006, 09: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)

28.01.2006, 11:44

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

dsmcg · 28.01.2006, 11:49

Zitat:

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*

28.01.2006, 11: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:

dsmcg · 28.01.2006, 12: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

28.01.2006, 12: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

dsmcg · 28.01.2006, 12:40

Zitat:

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..

28.01.2006, 12: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.

dsmcg · 28.01.2006, 13:04

öhm, bei mir ist es gleich..

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

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
2 Div's zentrieren	pfump	HTML, Usability und Barrierefreiheit	7	24.04.2008 10:57
Formular mit DIVs	Aris Sung	HTML, Usability und Barrierefreiheit	2	25.11.2007 14:09
Dynamisches Container-Div für floating Divs	HStev	HTML, Usability und Barrierefreiheit	1	14.09.2007 12:39
Bereich um einen float left und float right Bereich	andrew22	HTML, Usability und Barrierefreiheit	8	27.02.2007 18:27
DIV's untereinander -> Problem	snatch-ic	HTML, Usability und Barrierefreiheit	1	05.02.2007 12:39
Float für Fortgeschrittene	axelnes	HTML, Usability und Barrierefreiheit	5	12.04.2006 10:29
div's schachteln mit float	Crypi	HTML, Usability und Barrierefreiheit	8	31.01.2006 16:30
3 divs nebeneinander mit dynamisch gleicher Höhe		HTML, Usability und Barrierefreiheit	19	18.01.2006 22:05
DIV's positionieren	scooter	HTML, Usability und Barrierefreiheit	10	12.01.2006 16:11
DIVs nebeneinander	freitz	HTML, Usability und Barrierefreiheit	4	21.04.2005 22:47
div + float zentrieren	Anubis2183	HTML, Usability und Barrierefreiheit	1	18.04.2005 08:44
CSS: 2 Spalten á 50% ohne float		HTML, Usability und Barrierefreiheit	2	31.03.2005 14:37
float: right; hängt unten raus		HTML, Usability und Barrierefreiheit	6	31.03.2005 14:17
[Erledigt] drei divs nebeneinander		HTML, Usability und Barrierefreiheit	5	10.01.2005 20:27
Verschachtelung von DIV's bei unterschiedlichen Auflösungen		HTML, Usability und Barrierefreiheit	8	24.12.2004 14:45


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

28.01.2006, 09:04
dsmcg Erfahrener Benutzer Registriert seit: 11.10.2005 Beiträge: 2.405	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) __________________ Wie man Fragen richtig stellt

28.01.2006, 11:44
Gast Beiträge: n/a	Bei mir sieht das so aus, Hauptteil ist unter Navigation:

28.01.2006, 12:24
Gast Beiträge: n/a	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

28.01.2006, 12:47
Gast Beiträge: n/a	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.

28.01.2006, 13:04
dsmcg Erfahrener Benutzer Registriert seit: 11.10.2005 Beiträge: 2.405	öhm, bei mir ist es gleich.. benuzt halt web-farben, die sollten auf allen Systemen gleich sein.. __________________ Wie man Fragen richtig stellt