✔ Spaltenlayout innerhalb eines Containers

Status
Nicht offen für weitere Antworten.
A

anno_1976

Grünschnabel
Hallo Leute,

ich war bis jetzt Tabellennutzer und probiere gerade mein erstes CSS Layout aus.

Schaut euch mein bisheriges Ergebnis an. Beispielansicht

Mein Problem besteht jetzt darin, dass ich ID=navi und ID=content in Spaltenform gern nebeneinander hätte. Beid Container sind innerhalb des Containers ID=main.

Für Profis ist das sicherlich ne Leichtigkeit, aber irgendwie hab ich noch kein richtiges Beispiel gefunden, was mein Problem erklärt. Kann mir jemand weiterhelfen und mir einen Tipp geben wie #navi und #content nebeneinander statt untereinander bekomme..

HTML: 
<body>
   <div id="banner">
   	<div id="title">Testeintrag</div>
   </div>
   
   <div id="main">
   
   	  <div id="navi">
   	  Navigation  
   	  <a href="#">Test1</a>
   	  <a href="#">Test2</a>
   	  <a href="#">Test3</a>
   	  <a href="#">Test4</a>
   	  </div>
   
   	 <div id="content"> Test </div>
   
   </div>
   <div id="footer"></div>
   </body>

Relevanter CSS Code
Code: 
   #main {
   	background-image: url(../images_template/spacer_content.gif);
   	background-repeat: repeat-y;
   	width: 790px;
   	height: auto;
   	position: static;
   	top: 133px;
   	text-align: left;
   }
   #navi {
   	width: 150px;
   	height:auto
   	background-color: #FFFFCC;
   	position: relative;
   	vertical-align: middle;
   	border-right-width: 1px;
   	border-right-style: dashed;
   	border-right-color: #BFBFBF;
   	background-color: #FFFFCC;
   	left: 16px;
   	top: 4px;
   	float: none;
   	clear: left;
   }
   #content {
   	width: 580px;
   	background-color: #FFFFCC;
   	position: relative;
   	left: 180px;
   	top: 10px;
   	right: 8px;
   }
 
CSS-Code für nebeneinander liegende (floatende) DIVs:
Code: 
#navi {
   	float: left;
   	width: 150px;
   	height: auto;
   	background-color: #FFFFCC;
   	vertical-align: middle;
   	border-right-width: 1px;
   	border-right-style: dashed;
   	border-right-color: #BFBFBF;
   	background-color: #FFFFCC;
   	}
   #content {
   	float: right;
   	width: 580px;
   	background-color: #FFFFCC;
         margin-right: 8px;
   	}
 
Zuletzt bearbeitet von einem Moderator:
Glaub mir ich hab schon überall nach dem Abhaken des Threads gesucht, um deinen Comment zu vermeiden, aber ich versage ja selbst dabei. ;-)
 
Dann schau mal rechts unterhalb des letzten Beitrags, dort ist der 'Status-Button' des Themas, auf dem derzeit 'nicht-erledigt' steht.
 
Ich hab' noch ne ergänzende Frage:

Wenn ich nun mehre Elemente nebeneinander Floatend hab', z.B. [A] [B] [ C] [D], der Platz aber ohne Scrollen nur für [A][B] reicht, wie überzeuge ich den Browser nun davon, dass er die Elemente trotzdem alle nebeneinander platziert und nicht umbricht (sondern ne Scrollbar einblendet).

is-Zustand:
Code: 
[A] [B] 
[ C] [D]


soll-Zusatnd
Code: 
[A] [B] [ C] [D]

<------------>


:) Vielen Dank schonmal!
 
Es ist in diesem Fall ein Eltern-DIV erforderlich, das die Gesambreite aller darin eingebauten Kinder-DIVs besitzt.

Code: 
body
{
margin: 0;
padding: 0;
}

div.parent
{
width: 1225px;
border: 1px solid #000;
}

div.child
{
float: left;
width: 300px;
background: #dfdfdf;
margin: 0 0 0 5px;
}

div.clear
{
clear: left;
height: 0;
line-height: 0;
font-size: 0;
margin: 0;
padding: 0;
}
HTML: 
<div class="parent">

     <div class="child">A</div>

     <div class="child">B</div>

     <div class="child">C</div>

     <div class="child">D</div>

     <div class="clear"></div>

</div>
 
hm, ok. Vielen Dank.
So ginge es, wenn immer klar ist wie breit die Seite ist. Wenn aber neue beiträge immer links angehängt werden, dann müsste man jeweils die Breite des neuen Beitrages zu der Breite des ElterParent-DIVs addiert werden. Das muss doch auch anders gehen....

Mit ner Tabelle wär' das ja kein Problem. Nu hab' ich mir aber auch vorgenommen die nichtmehr zu verwenden (dafür)....

Keine andere Idee?
 
Sorry, da habe ich keinen CSS-Lösungsansatz parat .... :confused:

Vielleicht lässt sich die von dir gewünschte 'dynamische Breitenermittlung' mit Javascript regeln?
 
Zuletzt bearbeitet von einem Moderator:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück