Mehrere Divs nebeneinander ohne Überlappen (HTML)

...komplette Frage anzeigen

5 Antworten

Nun so sollte das eigentlich tun.

HTML:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div id="links"></div>
  <div id="rechts"></div>
</body>
</html>

CSS:

#links {
  float: left;
  width: 200px;
}

#rechts {
 margin-left: 200px;
 width: 400px;
}

Vielen Dank, funktioniert super...

0

Die Lösung liegt darin, dass Du Deiner Seite (body) eine Minimumbreite min-width:960px; definieren solltest. Ein Beispiel genau zu Deinem Problem findest Du unter http://www.cc-profis.de . Dort werden die Menüs unten genau über solche DIVs realisiert und eben diese Minimumbreite definiert. Wenn Du dort jetzt das Browserfenster verkleinerst, dann werden die DIVs eben nicht übereinander geschoben.

Es gibt zwei Arten von Seitenaufbauten. Die erste ist eine Feste seite, die auf eine Bildschirmgröße zugeschnitten ist. Das ist meist die Breite 930px. Dann gibt es die Seiten, die eine art dynamische Seite haben. Das heist, du gibst nichts mit absoluten Werten, sondern mit relationen an. Wenn du beispiesweise ein Bild in der Mitte haben möchtest geht das bei einer bildschirmbreite von 600px (fiktiv) mit wight:300px; oder mit wight:50%.

Bei dem zweiten Beispiel wird dieses Bild mit dem oberen linken Punkt immer in der Mitte sein, egal welche größer der Bildschirm hat.

Hast du den beiden Containern eine Feste Größe zugewiesen? (also width= xxx px) Wenn du dann das Fenster VERKLEINERST muss es ja dazu kommen dass sich die beiden Container überlappen! (wenn also die Fensterbreite < ist als die beiden Container

Die Container haben eine feste Breite.. Hat das einen Einfluss?

0

Ist die Seite online ? Wenn ja kann ich dir besser helfen wenn ich die sehen kann.

Was möchtest Du wissen?