Div neben- und untereinander

Status
Nicht offen für weitere Antworten.

xthetronx

Erfahrenes Mitglied
Hallo zusammen,

meine Suche im Forum hat mir leider keine Antwort geliefert, deshalb meine Bitte um Hilfe.

Ich habe mir ein CSS Layout zusammen gebastelt, was soweit funktioniert, bis ich zu den Div s komme, welche sowohl neben, als auch untereinander angeordnet sein sollen.
Zur Veranschaulichung habe ich mal einen Screenshot angehängt.
Ich bin nicht farbenblind, ist nur zum besseren Verständniss so bunt. ;-)

Was ich erreichen möchte ist, dass das DIV "Unten Links" unterhalb von DIV "Oben Links" angezeigt wird, mit einem Abstand von 0.5em, also margin: 0 0 0.5em
Auf der rechten Seite soll es genauso sein.
Leider wird das gelbe "Unten Links" DIV nur neben dem grünen DIV "Oben Links angezeigt.
Unten mein bisheriger Code.

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testseite</title>
<style type="text/css">
  body {
    color: black; background-color: gray;
    font-size: 90.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0 3em 0 3em; padding: 1em;
    min-width: 41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
  }
div#content{
	border:1px solid white;
	padding:0 0em;
}  
div#header {
    margin: 0 0em 0em 0em;
    padding: 0 30em;
	height:108px;
	/*background-image:url(fileadmin/template/images/header_background.jpg);*/
	background-color:#0033CC;
} 

ul#navigation {
	margin: 0.0em 0 0.1em; padding: 0.1em 0em 0em;
	height:29px;
	background-image:url(fileadmin/template/images/navi_background.gif);
	font-size:14px;
	font-weight:normal;
	border-bottom:1px solid white;
} 
ul#navigation li{
	list-style:none;
	display:inline;
}
ul#navigation a, ul#navigation span {
	float:left; width:5em;
	margin: 0.0em; padding: 0.41em 1em 0.5em;
	text-decoration: none; font-weight: normal; text-align:center;
	color: maroon;	
	border-right:1px solid white;
	border-left:1px solid white;
}

* html ul#navigation a, * html ul#navigation span {  /* Korrektur fuer IE 5.x */
	width: 8em;
	w\idth: 6em;
}
ul#navigation a:hover, ul#navigation span {
	border-color: white;
	background-image:url(fileadmin/template/images/hintergrund_rot.jpg);
}
div#diashow {
	margin: 0 0 0.5em 0;
	height:100px;
	background-image:url(fileadmin/template/images/diashow_background.jpg);
}
div#mitte {
    margin: 0 12em 1em 16em;
    padding: 0 1em;
    border: 1px dashed silver;
	background-color:#FF00FF;
}
div#oben_links {
    font-size: 0.83em;
    float: left; width: 18em;
    margin: 0 0 1.2em; padding: 0;
    border: 1px dashed silver;
	background-color:#009966;
}
div#unten_links {
    font-size: 0.83em;
    float: left; width: 18em;
    margin: 0 0 1.2em; padding: 0;
    border: 1px dashed silver;
	background-color:#FFFF00;
}
div#oben_rechts {
    font-size: 0.9em;
    float: right; width: 12em;
    margin: 0 0 1.1em; padding: 0;
    background-color: #e7e7e7; border: 1px dashed silver;
}
div#unten_rechts {

}
  p#Fusszeile {
    clear: both;
    font-size: 0.9em;
    margin: 0; padding: 0.1em;
    text-align: center;
	/*background-image:url(fileadmin/template/images/infokasten_header.gif);*/
	background-color:#000066;
    border-left: 1px solid white;
	border-right:1px solid white;
	border-bottom:1px solid white;
  }
</style>
</head>

<body>
<div id="content">
	<div id="header"></div>
		<ul id="navigation">
			<li><a href="../seite.htm">Home</a></li>
			<li><a href="../seite2.htm">Seite</a></li>
			<li><a href="../seite3.htm">Seite</a></li>
			<li><a href="../seite3.htm">Seite</a></li>
			<li><a href="../seite3.htm">Seite</a></li>
			<li><a href="../seite3.htm">Seite</a></li>
			<li><a href="../seite3.htm">Seite</a></li>    
			<li><a href="../seite3.htm">Seite</a></li>  
		</ul>

	<div id="diashow"></div>
	<div id="oben_links">Oben Links<br />
		<br />
		<br />
		<br /><br />
<br />
<br />

	</div>
	<div id="unten_links">Unten Links<br />
		<br />
		<br />
		<br />
	</div>
	<div id="oben_rechts">Oben Rechts<br />
		<br />
		<br />
		<br />
		<br />
		</div>	
	<div id="mitte">Inhalt<br />
		<br />
		<br />
		<br />
		<br /><br />
<br />
<br />
<br />
<br />

	</div>
</div>
<p id="Fusszeile">Fusszeile</p>

</body>
</html>
Bin dankbar für eure Vorschläge.

Gruß

Torsten
 

Anhänge

  • demo_temp.jpg
    demo_temp.jpg
    30,1 KB · Aufrufe: 297
Hi,

Du könntest links und rechts jeweils eine "Spalte" erstellen (leftCol und rightCol), welche die DIVs aufnehmen.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testseite</title>
<style type="text/css">
  body {
    color: black; background-color: gray;
    font-size: 90.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0 3em 0 3em; padding: 1em;
    min-width: 41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
  }
div#content{
	border:1px solid white;
	padding:0 0em;
}
div#header {
    margin: 0 0em 0em 0em;
    padding: 0 30em;
	height:108px;
	/*background-image:url(fileadmin/template/images/header_background.jpg);*/
	background-color:#0033CC;
}

ul#navigation {
	margin: 0.0em 0 0.1em; padding: 0.1em 0em 0em;
	height:29px;
	background-image:url(fileadmin/template/images/navi_background.gif);
	font-size:14px;
	font-weight:normal;
	border-bottom:1px solid white;
}
ul#navigation li{
	list-style:none;
	display:inline;
}
ul#navigation a, ul#navigation span {
	float:left; width:5em;
	margin: 0.0em; padding: 0.41em 1em 0.5em;
	text-decoration: none; font-weight: normal; text-align:center;
	color: maroon;
	border-right:1px solid white;
	border-left:1px solid white;
}

* html ul#navigation a, * html ul#navigation span {  /* Korrektur fuer IE 5.x */
	width: 8em;
	w\idth: 6em;
}
ul#navigation a:hover, ul#navigation span {
	border-color: white;
	background-image:url(fileadmin/template/images/hintergrund_rot.jpg);
}
div#diashow {
	margin: 0 0 0.5em 0;
	height:100px;
	background-image:url(fileadmin/template/images/diashow_background.jpg);
}
div#mitte {
    margin: 0 12em 1em 16em;
    padding: 0 1em;
    border: 1px dashed silver;
	background-color:#FF00FF;
}

#leftCol{ float: left;}
div#oben_links {
    font-size: 0.83em;
    width: 18em;
    margin: 0 0 1.2em; padding: 0;
    border: 1px dashed silver;
	background-color:#009966;
}
div#unten_links {
    font-size: 0.83em;
    width: 18em;
    margin: 0 0 1.2em; padding: 0;
    border: 1px dashed silver;
	background-color:#FFFF00;
}

#rightCol{ float: right;}
div#oben_rechts {
    font-size: 0.9em;
    width: 12em;
    margin: 0 0 1.1em; padding: 0;
    background-color: #e7e7e7; border: 1px dashed silver;
}
div#unten_rechts {
    font-size: 0.9em;
    width: 12em;
    margin: 0 0 1.1em; padding: 0;
    background-color: #ff0; border: 1px dashed silver;

}

.clearDiv{ font-size: 1px;
					 line-height: 0em;
           height: 0;
           clear: both;}
  p#Fusszeile {
    clear: both;
    font-size: 0.9em;
    margin: 0; padding: 0.1em;
    text-align: center;
	/*background-image:url(fileadmin/template/images/infokasten_header.gif);*/
	background-color:#000066;
    border-left: 1px solid white;
	border-right:1px solid white;
	border-bottom:1px solid white;
  }
</style>
</head>

<body>
<div id="content">
	<div id="header"></div>
		<ul id="navigation">
			<li><a href="../seite.htm">Home</a></li>
			<li><a href="../seite2.htm">Seite</a></li>
			<li><a href="../seite3.htm">Seite</a></li>
			<li><a href="../seite3.htm">Seite</a></li>
			<li><a href="../seite3.htm">Seite</a></li>
			<li><a href="../seite3.htm">Seite</a></li>
			<li><a href="../seite3.htm">Seite</a></li>
			<li><a href="../seite3.htm">Seite</a></li>
		</ul>

	<div id="diashow">Diashow</div>

  <div id="rightCol">
    <div id="oben_rechts">Oben Rechts<br />
      <br />
      <br />
      <br />
      <br />
    </div>
    <div id="unten_rechts">Unten Rechts<br />
      <br />
      <br />
      <br />
      <br />
    </div>
  </div>

  <div id="leftCol">
	  <div id="oben_links">Oben Links<br />
	    <br />
	    <br />
	    <br /><br />
	    <br />
	    <br />
	  </div>
	  <div id="unten_links">Unten Links<br />
	    <br />
	    <br />
	    <br />
	  </div>
  </div>

  <div id="mitte">Inhalt<br />
    <br />
    <br />
    <br />
    <br /><br />
    <br />
    <br />
    <br />
    <br />
  </div>

  <div class="clearDiv">&nbsp;</div>
</div>
<p id="Fusszeile">Fusszeile</p>

</body>
</html>
Beachte, dass die rechte Spalte zuerst notiert wird!

Das Element mit der Klasse clearDiv dient dazu, den normalen Textfluss wieder herzustellen.

Vielleicht kannst Du etwas damit anfangen

Ciao
Quaese
 
Ja, da sag ich doch mal ganz herzlich danke an euch beide.
Dein Tip ist genau das was ich gesucht habe Quaese. So einfach wie einleuchtend! :)

Vielen Dank nochmal für die schnelle Hilfe!

Gruß

Torsten
 
Status
Nicht offen für weitere Antworten.
Zurück