Mehrere Divs nebeneinander ohne Überlappen (HTML)

Hallo Zusammen

Ich würde gerne in meiner Webseite ein Div mit einem Inhalt links der Seite, sowie der Hauptinhalt in einem anderen Div rechts der Seite anzeigen lassen.

Das habe ich soweit auch hingekriegt. Jetzt kommt das Problem:

Bei Verkleinerung des Browserfensters überlappen sich die einzelnen Divs und ich möchte fragen wie man diese dazu zwingt sich nebeneinander einzureihen...

Freue mich auf Ratschläge,

Liebe Grüsse

7 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

apachy

02.12.2013, 16:44

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;
}

Woher ich das weiß:Berufserfahrung – Softwareentwickler/Projektleiter seit 2012

einesehrgutfrag

Beitragsersteller

02.12.2013, 20:33

Vielen Dank, funktioniert super...

einesehrgutfrag

02.12.2013, 15:21

Für das bessere Verständis hier noch der Quelltext:

<html>
<body>
<div id="parent">
<div id="inhalt">
Inhaltsverzeichnis
</div>  
<div id="haupt">
Hauptinhalt
<div class="clear"></div>
</div>
</body>
</html>

Und hier noch die CSS:

#parent {
   width: auto;
   background-color: transparent;
   padding: 0;
   border-top:0px;
   border-bottom:0px;
   margin: 0 auto;
   }

#inhalt {

 position:fixed;
  left  : 30px;
   background-color:rgba(255,255,255,0.4);
   width: 100px;
  height:auto;
   padding-bottom:50px;
   padding-left:25px;
   padding-right:50px;
   padding-top:50px;
   margin-bottom:auto;
   margin-top:10px;
   margin-left:auto;
   margin-right:auto;
   text-align: left;
   float: left;
   }

#haupt {
background-color:rgba(255,255,255,0.4);
width:700px;
height:auto;
padding-bottom:50px;
padding-left:50px;
padding-right:50px;
padding-top:50px;
margin-bottom:auto;
margin-top:10px;
margin-left:auto;
margin-right:auto;
text-align: left;
align: left;
}


.clear{ clear: both; }

Liebe Grüsse

Dory1

02.12.2013, 16:28

#parent {
   padding: 0;
   margin: 0 auto;
}

#inhalt {
   float: left;
   background-color:rgba(255,255,255,0.4);
   width: 100px;
   padding:50px 50px 50px 25px;
   margin-top:10px;
   text-align: left;
}

#haupt {
   float: left;
   background-color:rgba(255,255,255,0.4);
   width:700px;
   padding:50px;
   margin-top:10px;
}

.clear{ clear: both; }

das "position: fixed" ist für deine Zwecke unnötig.

Mattes2014

12.12.2013, 14:45

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.

ostfriesenjung

02.12.2013, 14:48

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

einesehrgutfrag

Beitragsersteller

02.12.2013, 15:25

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

Ähnliche Beiträge

4 divs nebeneinander anordnen

Hallo, ich habe 4 divs, die in einem großen div direkt nebeneinander liegen sollen.

ich hab erstmal ohne stylesheet angefangen:D

http://finnzentgraf.fi.funpic.de/Untitled-1.html

warum leigen die alle untereinander, und sogar außerhalb des großen divs?

...zum Beitrag

Webseiten Aufbau...Div Blöcke nebeneinander?

Hallo

Ich bin dabei eine Seite aufzubauen die aus mehreren Div Blöcken besteht ...Siehe Bild

Ich stehe vor einem Problem ...wie schaffe ich es drei Div Blöcke nebeneinander zu positionieren ....

div.Navigation | div.Content | div.Informationen

...kann mir da jemand helfen

Das ganze mache ich in ASP.NET ...sollte aber eigentlich egal sein weil das ja nur mit HTML und CSS zu tun haben muss

gruß .w.t

...zum Beitrag

Wie lasse ich ein Bild in CSS einem DIV-Element überlappen?

Hallo,

ich veranstalte bald eine Reihe von Gewinnspielen anlässlich des 10-jährigen Bestehens. Über die volle Breite des Bildschirms soll am unteren Rand fixiert eine Leiste zu sehen sein, mit der man schnell per Klick zum Gewinnspiel kommt.

Links im DIV soll ein Bild von einem Luftballon zu sehen sein, der dann sozusagen über dem DIV "schwebt"; also die Styles des DIVs nicht übernimmt, sondern transparent einfach darüber liegt.

Ich habe jetzt folgenden Codepen: https://codepen.io/gooloonetwork/pen/KKvXoMO

Aber irgendwie sieht man das Bild nicht. Hat jemand einen Tipp, wie ich es hinbekomme, dass das Bild zu sehen bleibt (und vielleicht auch eine Idee, wie sich Bild und Text nicht beißen, also der Text aus dem ersten DIV nicht aus Versehen in den Hintergrund des Bilds schwappen)?

...zum Beitrag

Drei DIV-Boxen nebeneinander?

Hallo, ich möchte meine Webseite übersichtlicher machen indem ich zwischen zwei Balken einen Text haben möchte, leider gelingt es mir nicht eine 3. Box hineinzubekommen, nur für die Schrift. Das erste Bild ist der jetzige Stand, das zweite Bild soll zeigen wie die Webseite aussehen sollte, das dritte ist mein php code. box_2 linke box mit den Balken, box_3 die rechte.

...zum Beitrag

Wie kann ich ein bestimmtes div per PHP von einer anderen HTML-Seite einfügen?

Hallo!

Ich habe eine Hauptseite "index.php" und eine Seite divs.html. In der divs.html sind verschiedene divs mit Inhalt, also beispielsweise:

<div id="eins">Inhalt</div>
<div id="zwei">noch ein Inhalt</div>
<div id="drei">und so weiter</div>

Ich möchte nun gerne in der index.php z.B. den Inhalt vom div mit der ID "zwei" per include in index.php einfügen.

Hat jemand Ideen?

...zum Beitrag

Html Div höhe?

Ich habe 2 Divs mit dem Style .text{ float: left;} nebeneinander der erste hat 2 Zeilen Text, der zweite hat 5 Zeilen Text. Das hat zur Folge, das der erste eine höhe von 2 Zeilen, der zweite eine Höhe von 5 Zeilen hat. Nun möchte ich, dass sich die höhe vom ersten automatisch an die höhe des zweiten anpasst (egal wie viel Zeilen der zweite hat z.B. 10, 12, usw.).

...zum Beitrag

CSS div Seitenverhältnis?

Hi,

ich möchte gerne responsive Quadrate auf der HTML Seite haben. In die Breite funktioniert das super mit width: 50%;. Was aber muss ich machen, damit das Seitenverhältnis immer 1:1 bleibt und die Rechtecke je nach Browser-Größe auch wirklich Quadrate bleiben?

...zum Beitrag

Kann man zwei divs nebeneinander machen/haben?

...zum Beitrag

Basic HTML Kästchen positionieren?

Hey.

Also ich weiß, dass es bei HTML divs gibt die sozusagen Blöcke sind die man mit Eigenschaften versehen kann via CSS.

nun wollte ich ein einfaches web layout gestalten aber scheitere daran, dass ich divisions einmal rechtsbündig und einmal linksbündig zentriere mit nem abstand dazwischen

wie ihr sehen könnt habe ich es dann zusammen gepfuscht bekommen sodass die abstände halbwegs passen.

gibt es da einen besseren zugang ? Bitte nur Tipps will selbst auf die Lösung kommen :)

bin auch schon am Überlegen den Code komplett neu zu schreiben :)

habe euch ein bild vom layout gemacht. dachte eigentlich ich mache für jedes kästchen eine eigene div umgeben von einer master div welche die komplette breite bestimmen soll.

und darin dann eben die einzelnen divs entweder zentrieren oder rechts / links

nur weil ich eben 2 kästchen in einer reihe habe dachte ich daran es mit einem table zu lösen und in der tr dann eben 2x TD damit die divs nebeneinander sein können

nicht geklappt. hab eigentlich schon so ziemlich alles probiert. divs hinzufügen, entfernen und über css habe ich versucht einzelne elemente zu manipulieren etc.

haut leider nicht hin.

Was meint ihr zu den bilder crop und größen veränderung. ich weiß man könnte es mit photoshop auf die entsprechende größé trimmen aber ich wollte es mit html/css schaffen :)

habe auch versucht den code Schön zu machen als "Lesbar", was hält ihr davon?

HTML

http://pastie.org/p/2vfSJIRfb5QSHBNQciATWO

Header CSS

http://pastie.org/p/6wEHhhZQWKYwwfC2RSxof3

Mainstyle CSS

http://pastie.org/p/5gFxKIEBpI0f5dlimjen9X

Footer CSS

http://pastie.org/p/5oUkLA58gIJ8cgWjw6gGTq

...zum Beitrag

HTML/CSS, Footer, Divs werden untereinander und nicht nebeneinander platziert?

Guten Abend. :)

Ich beschäftige mich momentan viel mit HTML und CSS und habe eine eigene kleine Website zum Spaß gemacht.

Aus Jux und Tollerei wollte ich jetzt einen Facebook-Like und einen -Teilen-Button mit einbauen, und das in einem Footer. Die Buttons habe ich beide jeweils in ein Div gepackt und diesen per "float: left;" gesagt, das sie sich nebeneinander von links anordnen sollen. Zumindest stand in sehr vielen anderen Foren in denen ich mich umgesehen habe so ziemlich überall genau das.

Bei mir funktioniert das aus unerfindlichen Gründen leider nicht, die Buttons werden untereinander angeordnet.

Zur Seite kommt ihr hier: http://nyancatmarathon.tk/

(Am Besten auf Lautlos stellen, nervige Musik im Hintergrund, außerdem hat sich der Footer von ganz unten in die Mitte der Seite verschoben, als ich die Seite am Localhost bearbeitet habe war das noch nicht so, komisch...)

Ich hoffe jemand von euch weiß woran es liegt und kann mir helfen. :)

Vielen Dank und LG, Bluedragon1

...zum Beitrag

Wie kann ich mit HTML/ CSS DIV Tags bündig an den Rand anpassen?

Ich habe folgendes Problem mit Html/Css. Ich möchte gerne einen div tag auf einer Website ganz oben ansiedeln. Das einzige Problem was ich dabei habe ist, dass ich es nicht bündig hinbekomme. Zwar schließen die Div Tags untereinander bündig ab, aber jeweils am Rand der Website bleibt ein Spalt über. Mit Margin & Padding klappt es leider auch nicht. Ein Beispiel Quelltext habe ich hier:

<head>
<style type="text/css">
#do {
background-color:grey;
height: 50%;
margin:0px;
padding:0px;
border:none;
}
#di {
background-color:red;
height: 50%;
margin:0px;
padding:0px;
border:none;
}
</style>
</head>
<body>
<div id="do">
Hallo
</div>
<div id="di">
Hallo
</div>
</body>

PS: Das ist nur ein Beispiel, welches mein Problem verdeutlichen soll. Ich hoffe ihr könnt mir helfen.

...zum Beitrag

HTML/CSS: Floats überlappen sich beim Minimieren, wie behebt man das?

Hallo,

ich bin dabei eine kleine Website zu erstellen. (Nicht online) Dabei habe ich mit dem Responsive Webdesign Probleme. Auf dem Smartphone, Tablet, Pc sieht die Seite gut aus. Jedoch, wenn ich das Browser-Fenster kleiner verschiebe, überlappen sich Bilder mit dem Text an einer Stelle. (Der Text ist speziell in Lists unterteilt.)

Hat mir jemand einen Rat? Die Bilder sind in Div-Boxen, der CSS Code dafür sieht ungefähr so aus:

    vertical-align: top;
    margin-right: xy
    margin-top: xy
    float: right;
    width: auto;

...zum Beitrag

Eine Div immer im Vordergrund, wie?

Ich habe zwei Divs. Eine oben in fixed Position und eine darunter in absolute. Wenn ich nach unten Scrolle überdeckt die untere Div die obere. Wie bekomme ich die obere Div, die in fixed Postion steht immer ganz nach vorne?

[Bereich HTML/CSS]

...zum Beitrag

Wie macht man eine HTML Webseite responsive?

Ich habe in einem div Container zwei div Container nebeneinander.

Wenn man die Webseite vom Handy aus öffnet, sollen die zwei div Container welche nebeneinander sind übereinander angezeigt werden, ansonsten sieht der Text echt schlecht aus, wie kriege ich das hin?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen