• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DIVs neben einander anzeigen lassen

Z

Zettelkasten

Neues Mitglied
Hey Leute!

Ich habe ein Problem, dass ich glaube ich schon 100 mal hingekriegt habe: Aber ich schaffe es nicht, zwei DIVs horizontal nebeneinander zu plazieren.
Sicherlich liegt mein Fehler auf der Hand, aber ich zerbrech mir jetzt schon seit einer halben Stunde den Kopf darüber und habe nichts gefunden :cry:

Hier ist mein verwendeter HTML-Code: (index.php)
HTML: 
<html>  <head>    <title>Aktuelles</title>    <link rel="stylesheet" type="text/css" href="style.css" />    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />  </head>  <body>    <div id="container">      <div id="navigation-top">        NAVIAGTION (TOP)      </div>      <div id="panel">        <div id="panel-sidebar">          SIDE-BAR        </div>        <div id="content">          CONTENT        </div>      </div>    </div>  </body></html>

Die beiden bösen DIVs sind "panel-sidebar" und "content".

Dazu der CSS-Code in der style.css-Datei:
Code: 
body {  background-color: ABC9FE;
}


#container {
   position: absolute;
   width: 800px;
   top: 100px;
   left: 50%;
   margin-left: -400px;
}


#navigation-top {
  width: 800px;
  height: 50px;
  background-color: 575757;
  background-image: url("img/NaviTop.png");
}
#panel {
  position: none;
  width: 800px;
  background-image: url("img/PanelBackground.png");
}
#panel-sidebar {
  width: 200px;
  /* background-image: url("img/SidebarBackground.png"); */
  background-color: pink;
}
#content {
  width: 401px;
  /* background-image: url("img/ContentBackground.png"); */
  background-color: orange;
}

Hat jemand Ideen?
Wäre echt super, wenn jemand mir helfen könnte! :-o

Danke!
 
Zuletzt bearbeitet:
schau dir mal die eigenschaft float an.
wenn du das erste böse mit float: left ausstattest sollte es gehen
 
Danke erst einmal für die schnelle Antwort.
Da hab ich mich falsch ausgedrückt. Das ganze soll keine Sidebar sein, unter der der Text (wie bei einem Bild) links weitergeht, sondern genauso hoch wie der CONTENT sein, also so:
Code: 
[FONT=lucida console]

|--|------|[/FONT][FONT=lucida console]
|  |      [/FONT][FONT=lucida console]|  S = Sidebar[/FONT][FONT=lucida console]
|S |[/FONT][FONT=lucida console]    C [/FONT][FONT=lucida console]|  C = Content[/FONT][FONT=lucida console]
|  |      [/FONT][FONT=lucida console]|[/FONT][FONT=lucida console]
|--|------|[/FONT]


So!
Vielen Dank trotzdem, war mein Fehler.

Wäre nett, wenn jemand mir helfen könnte :-)
 
Zuletzt bearbeitet:
Möglicherweise hast du float falsch angewant. poste mal bitte sen quellcode, wo der text unter der sidebar weiter verläuft.
 
Versuch's mal so.
Code: 
body {  background-color: ABC9FE;
}


#container {
   width: 800px;
   margin:100px auto 0 auto;
  background:pink;
  overflow:hidden;
}


#navigation-top {
  height: 50px;
  background:#575757;
}


#sidebar {
  float:left;
  width: 200px;
  background-color: pink;
}
#content {
  margin-left:200px;
  background: orange;
}

#content:after {
 content:".";
 clear:both;
 display:block;
 height:0;
 width:0;
 line-height:0;
 visibility:hidden;
}

Code: 
<body> 
<div id="container"> 
<div id="navigation-top">NAVIAGTION (TOP)</div> 

<div id="sidebar">SIDE-BAR</div>
<div id="content">CONTENT</div> 
</div> 

 </body>
Ach, und DOCTYPE nicht vergessen!
 
Ich bins nochmal... und habe eine ähnliche Frage:

Ist dies auch mit 3 horizontal nebeneinanderliegenden DIVs möglich? Ich würde dann nämlich den DIV links genau mit den gleichen Attributen noch einmal rechts machen. So wird dieser jedoch links unter den beiden anderen DIVs angezeigt.

Ihr könnt euch das ganze auch online anschauen, wenn euch das hilft: Aktuelles | Alysia Minecraft-Server

Vielen Dank schon im Voraus! Ihr habt mir beim erstenmal echt geholfen :-D
 
Der Seite fehlt ein Doctype. Ohne den wirst Du Probleme in der einheitlichen Darstellung haben. Also: ergänzen.

Deine Frage kann man so beantworten:

HTML: 
<div style="float: left;">linker Bereich</div>
<div style="float: right;">rechter Bereich</div>
<div>mittlerer Bereich</div>
 
Code: 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Testseite</title>
    <style type="text/css">

* {
 margin:0;
 padding:0;
}

body {  background-color: ABC9FE;
}


#container {
   width: 800px;
   margin:100px auto 0 auto;
  background:pink;
  overflow:hidden;
}


#navigation-top {
  height: 50px;
  background:#575757;
}


#sidebar {
  float:left;
  width: 200px;
  background-color: pink;
}

#sidebar_rechts {
  float:right;
  width: 200px;
  background-color: pink;
}
#content {
  margin:0 200px;
  background: orange;
}

#content:after {
 content:"a";
 clear:both;
 display:block;
 height:0;
 width:0;
 line-height:0;
 visibility:hidden;
}

p {
 padding:10px;
}
</style>
</head>
<body> 
<div id="container"> 
<div id="navigation-top">NAVIAGTION (TOP)</div> 

<div id="sidebar">
<h2>SIDE BAR LINKS</h2>
     <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
     </p>
</div>
<div id="sidebar_rechts">
<h2>SIDE BAR RECHTS</h2>
     <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
     </p>
</div>
<div id="content">

<h2>Inhalt</h2>
     <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
     </p>
</div> 
</div> 

 </body>
</html>
 
Vielen Dank für all deine Mühe!
:-D :-D :-D :-D
Funktioniert suuppper

Eigentlich schade, dass man hier nur 1 Danke geben kann :-D

Ach ja, GipsPferd ist ne coole Seite!

 
Danke, danke für die Blumen. Naja, so langsam muss ich mal wieder was schreiben.
Ach, für den Fall, dass du noch ein Footer möchtest.
Code: 
#footer {
 clear:both;
 background:#ada;
}


<div id="footer><p>Footer</p></div>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben