DIVs mit Float anordnen

Computer: Software & Programmierung HTML & CSS
1

Liebe Werweisswas-Leute,

ich verzweifel mal wieder an einem Layoutproblem. Ich weiß, dass das schon tausendmal in anderen Threads besprochen wurde, von denen ich auch viele angeschaut habe, aber ich friemel hier trotzdem seit Stunden rum und kriegs einfach nicht hin.

Deshalb meine Frage: wie mache ich, dass der Text im Footer (grün umrandet), welcher 800 Pixel breit ist, tatsächlich auch bis nach Rechts geht?

http://visuellemeditation.de/netti/

Das ist die Struktur:

Und das das Stlyesheet:

div.hauptfenster {
margin-top: 110px;
position: relative;
margin-left: auto;
margin-right: auto;
width: 800px;
height: 300px;
border: 0px solid black;
background-image:url(images/background2.jpg);
}

div.linkespalte {height: 100%;
width: 266px;
float: left;
margin-left: 4px;
}

div.rechtespalte {height: 100%;
width: 266px;
float: right;
text-align: right;
margin-right: 4px;
margin-top: 27px;
}

div.mittlerespalte {height: 100%;
width: 266px;
margin: 0 auto;
float: clear;}

div.footer
{
width: 800px;
text-align: right;
color: #ababab;
border: 1px solid green;
font-size: 8px;
}

Ich wäre für Eure Hilfe sehr dankbar!

SirArthur

2

Hallo,

ich vermute mal, das liegt am content der rechten spalte, poste doch einfach mal alles und nicht nur brocken.

hth

3

Hallo Genius,

hier ist der Quelltext:

===

Ninette …
Kontakt:

…

  • Klavierunterricht

  • Konzerte

  • Trommelworkshops

  • Musikalische Früherziehung

  • Chilenische Folklore

Pianistin (Download PDF)
Musikpädagogin (Download PDF)

© 2013

===

Grüße, SirArthur

4

nimm die mal raus

5

Guten Tag,
Ich hab mir mal deine Seite angesehen, und dein Fehler liegt im Verständnis des Box Modelles. In diesem Fall ist die „rechte Spalte“ das Problem du sagst ihr das 27px von oben abstand haben soll dass heisst dass bei einer Höhe von 100% unten 27px rausgucken. Wodurch dein Copyright nach links verschoben wird.
Lösung: Zieh der rechten Spalte einfach wieder 27px unten ab: margin-bottom: -27px

Achso und Innen Abstände solltest du mit „padding“ realisieren

…

div.rechtespalte {
 height:100%;
 width: 266px;
 float: right;
 text-align: right; 
 margin-right: 4px;
 padding-top: 27px;
 margin-bottom: -27px
 }

…

P.s. mir hilft es immer sehr wenn ich zum erstellen ein:

div
{
outline: red dotted 1px;
}

einfüge

6

Guten Tag,

der Fehler liegt bei dem „rechtespalte“ Div.

Stelle die Höhe entweder auf 90% oder in Pixel.
Der Grund dafür liegt darin, dass die rechte box zu weit runter geht.

7

Danke, jetzt geht es. Hab das rechte div einfach kleiner gemacht!

-)

Liebe Grüße,
SirArthur

8

Danke, jetzt geht alles. Hab das rechte div kleiner gemacht!
Danke auch für den Tipp mit dem Padding! Ich verwechsel das immer… :wink:

Liebe Grüße,
SirArthur

9

Es lag an der Höhe des rechten Divs! Dennoch danke… :smile:

LG
Sir Arthur

10

Moin,

warum lernst Du nicht HTML? Das würde Dir auf Dauer ziemlich helfen. Layouten mit divs ist der gleiche Unsinn wie Layout mit Tabellen. Wo ist Deine Semantik? HTML ist für die Semantik da, nicht fürs Layout.

Probiers mal!

Liebe Grüße,
-Efchen