Ausrichtung DIV - Container klappt nicht

_R_A_L_F · 13. März 2014 um 21:28

Hallo,

das Problem ist, dass ich zwei DIV - Container hab, den einen möchte ich rechts und den anderen links ausrichten.

Das Problem ist nun, dass das nicht klappen will und ich nicht weiß wieso.

Anbei mal ein Screenshot wie es momentan aussieht und die Codes dazu.

style.css
[HTML]#body {
width: 1100px;
height: 1275px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
-moz-box-shadow: 0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
background-color:#FFFFFF;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
#top {
background-color: #979797;
height: 10px;
width: 1100px;
}
#logo {
float: left;
height: 200px;
width: 350px;
z-index: 2;
position:absolute;
margin-left: 25px;
-moz-box-shadow: 3px 3px 5px #000;
-webkit-box-shadow: 3px 3px 5px #000;
box-shadow: 3px 3px 5px #000;
}

a:link {
font-family: „Lucida Sans Unicode“, „Lucida Grande“, sans-serif;
font-size: 14px;
font-style: normal;
text-decoration: none;
color: #656565;
font-weight: normal;
}

a:visited {
font-family: „Lucida Sans Unicode“, „Lucida Grande“, sans-serif;
font-size: 14px;
font-style: normal;
text-decoration: underline;
}

a:hover {
font-family: „Lucida Sans Unicode“, „Lucida Grande“, sans-serif;
font-size: 14px;
font-style: normal;
text-decoration: underline;
}

#menue {
float: right;
height: 40px;
width: 680px;
padding-top: 4px;
}
#slideshow {
height: 0px;
width: 1050px;
z-index: 1;
position: absolute;
margin-top: 60px;
}
#inhalt {
float: left;
height: 500px;
width: 740px;
padding-top: 10px;
padding-left: 20px;
}
#inhalt_bilder {
float: left;
height: 500px;
width: 1000px;
padding-top: 10px;
padding-left: 20px;
}
#zeiten {
height: 250px;
width: 290px;
float: right;
padding-top: 10px;
padding-right: 10px;
}
.bilder_links {
height: 200px;
width: 350px;
padding-top: 10px;
padding-right: 10px;
border-top-style: double;
border-right-style: double;
border-bottom-style: double;
border-left-style: double;
margin-right: auto;
margin-left: 0px;
}
.bilder_rechts {
height: 200px;
width: 350px;
padding-top: 10px;
padding-right: 10px;
border-top-style: double;
border-right-style: double;
border-bottom-style: double;
border-left-style: double;
margin-right: 0px;
margin-left: auto;
}
H1 {
font-family: „Lucida Sans Unicode“, „Lucida Grande“, sans-serif;
font-size: 24px;
font-style: oblique;
color: #656565;
}
H2 {
font-family: „Lucida Sans Unicode“, „Lucida Grande“, sans-serif;
font-size: 14px;
font-style: normal;
color: #656565;
}
H3 {
font-family: „Lucida Sans Unicode“, „Lucida Grande“, sans-serif;
font-size: 14px;
font-style: normal;
color: #656565;
text-align: center;
}
#ende {
height: 15px;
width: 1050px;
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
text-align: center;
font-style: normal;
}
textarea {
resize: none;
}
[/HTML]

HTML-Seite
[HTML]

Bildergalerie

Altbausanierung

>> Hier gelangen Sie zum Album Altbau

Gewerbebau

>> Hier gelangen Sie zum Album Altbau

[/HTML]

Tronjer · 13. März 2014 um 21:55

Ich habe nur bis position:absolute gelesen …

_R_A_L_F · 14. März 2014 um 10:51

Hallo Tronjer,

also so groß ist die CSS - Datei auch wieder nicht

In der Klasse .bilder_links und .bilder_rechts ist aber kein position:absolute vorhanden. Hier nochmal die CSS - Eigenschaften die den Code betreffen:

[HTML]
#inhalt_bilder {
float: left;
height: 500px;
width: 1000px;
padding-top: 10px;
padding-left: 20px;
}
.bilder_links {
height: 200px;
width: 350px;
padding-top: 10px;
padding-right: 10px;
border-top-style: double;
border-right-style: double;
border-bottom-style: double;
border-left-style: double;
margin-right: auto;
margin-left: 0px;
}
.bilder_rechts {
height: 200px;
width: 350px;
padding-top: 10px;
padding-right: 10px;
border-top-style: double;
border-right-style: double;
border-bottom-style: double;
border-left-style: double;
margin-right: 0px;
margin-left: auto;
}
[/HTML]

Woran liegt es dann?

Tronjer · 14. März 2014 um 11:34

Ok, ich ignoriere mal das erste Posting und stelle mir jetzt ein Elternelement #inhalt_bilder und darin zwei Kindelemente: .bilder_links und .bilder_rechts vor.

#inhalt_bilder bekommt kein float
.bilder_links bekommt ein float:left
.bilder_rechts bekommt entweder float:left oder float:right. Je nachdem, ob das Element direkt an .bilder_links angrenzen oder rechtsbündig in #bilder_inhalt stehen soll.
Das darauf folgende Element muss ein clear enthalten.

_R_A_L_F · 14. März 2014 um 14:06

Danke für deine Bemühungen. Hab den Code jetzt mal so abgeändert wie von dir beschrieben:

#inhalt_bilder float entfernt
[HTML]#inhalt_bilder {
height: 500px;
width: 1000px;
padding-top: 10px;
padding-left: 20px;
}[/HTML]
.bilder_links float:left hinzugefügt
[HTML].bilder_links {
height: 200px;
width: 350px;
float:left;
padding-top: 10px;
padding-right: 10px;
border-top-style: double;
border-right-style: double;
border-bottom-style: double;
border-left-style: double;
margin-right: auto;
margin-left: 0px;
}[/HTML]
.bilder_rechts ebenfalls float:left hinzugefügt
[HTML].bilder_rechts {
height: 200px;
width: 350px;
float:left;
padding-top: 10px;
padding-right: 10px;
border-top-style: double;
border-right-style: double;
border-bottom-style: double;
border-left-style: double;
margin-right: 0px;
margin-left: auto;
}[/HTML]

Im danachfolgenden DIV (#Ende) habe ich ein Clear hinzugefügt:
[HTML]#ende {
height: 15px;
width: 1050px;
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
text-align: center;
font-style: normal;
clear: left;
}[/HTML]

Gleiches Ergebnis aber wie vorher (siehe Bild)

Tronjer · 14. März 2014 um 14:49

War das jetzt so schwer?
[HTML]

Foo #inhalt_bilder { width: 1000px; margin: auto; border: 1px green solid; } .bilder_links, .bilder_rechts { float: left; width: 350px; height: 300px; margin: 20px; } .bilder_links { border: 1px red solid; } .bilder_rechts { border: 1px blue solid; } .clear { clear: both; }

[/HTML]

djheke · 14. März 2014 um 14:52

upps

_R_A_L_F · 14. März 2014 um 15:11

Natürlich ist es nicht schwer. Dein Code funktioniert ja auch selbstverständlich. Nur wenn ich es in meiner CSS - Datei so einfüge, klappt es eben nicht.

Es klappt erst dann, wenn ich anstatt:
[HTML]

Altbausanierung

>> Hier gelangen Sie zum Album Altbau

[/HTML]

Das ganze nur noch so aufbaue:
[HTML]

Bildergalerie

bla links

bla rechts

[/HTML]

Also gehe ich mal stark davon aus, das es an dem verschachtelten DIV - Classes liegt. Nur wie löse ich das Problem?

bodo92 · 14. März 2014 um 15:26

Warum nutzt du nicht die zweite Variante?

Ist doch im großen und ganzen nicht viel unterschied…

_R_A_L_F · 14. März 2014 um 15:30

Hab ich jetzt auch so gemacht und es klappt auch. Nur zum Verständnis wollte ich nochmal nachfragen, warum es bei der Variante mit dem verschachtelten Containern nicht klappt?

bodo92 · 14. März 2014 um 19:04

Beim 2. Beispiel ist es auch Verschachtelt versteh nicht ganz was du meinst…
[INDENT][CODE]

Bildergalerie

1/1

1/2

2

[/CODE][/INDENT]