DIV passt sich nicht an den rechten Rand an

[Magnusmanu]

Hiho Leute,

und zwar folgendes Problem. Im unteren Bild seht ihr die bisherige Seite. Oben das weiße ist der Header und darunter ein grauer DIV Container. Etwas weiter unten dieser schwarze Kasten ist ein Bild. Dieses Bild ist nun zu groß für diese Auflösung und man muss nach rechts scrollen damit man das volle Bild sieht. Wie man aber sicherlich auch bemerkt passt sich das DIV und der Header nicht richtig an den Rand an. Width von denen ist im Moment auf 100% gesetzt aber ich hab es schon mit vielen dingen versucht und es klappt nicht. Ich stehe gerade total auf dem Schlauch und bekomme das nicht hin . Habt ihr dafür vielleicht eine Lösung? Recht herzlichen Dank schon mal ^^.

mfg Magnus

 

[MarcoPaulini]

Hi,
das liegt daran, dass sich die 100% beim width-Attribut immer auf die aktuelle Größe des Elternelementes beziehen (in deinem Fall das Browserfenster). Das heißt, wenn dein Browserfenster gerade eine Breite von 1200px hat, ist auch das div 1200px breit. Wenn das Fenster nun aber nur 400px breit ist, der Inhalt der Seite aber breiter (z.B. weil ein anderes div eine feste Breite von 900px hat), dann musst du horizontal scrollen und dein div mit einer Breite von 100% hört dann einfach auf, da es nur 400px breit ist (100% des Browserfensters).
Du kannst das Problem ganz einfach auf 2 Arten lösen. Entweder du fügst im CSS folgendes hinzu:

body {
overflow-x: hidden;
}

Dadurch wird das horizontale scrollen deaktiviert.
Oder du fügst bei deinem div eine Mindestbreite hinzu, die genauso groß ist, wie der restliche Seiteninhalt. Beispiel:

div#Header {
width: 100%;
min-width: 900px;
}

Ich würde dir zur 2. Methode raten.
Ich hoffe ich konnte dir helfen.

Gruß,
Marco

 

[Magnusmanu]

stimmt so ging das mit min-width ich Hans falsch gemacht ^^. Danke du hast mir den Nerv und den Tag gerettet ;D.