2 divs nebeneinander

ad3nau

Hallo, also ich bin immer noch dabei mich mit divs anzufreunden.
Jetzt habe ich versucht die seite in 2 teile zu teilen, in den hauptteil un in den naviteil. doch irgendwie will das nicht gehen. er übernimmt immer nur die erste größe von den ersten div, die größe von den zweiten div übernimmt er nicht, also es wird nur der erste div angezeigt, hier mein html code:

Code

<div id="main">
 	<div id="nav">
 	</div>
 </div>

und hier mein css cote:

Code

#main {
 width: 600px;
 height: 400px;
 background-color: #990099;
 text-align: right;
}


#nav {
 width: 770px;
 height: 400px;
 background-color: #F6F6F6;
 text-align: right;
}

Alles anzeigen

mfg

DarkSyranus

das sieht aber aus wie zwei divs ineinander...

ad3nau

wie mach ich dann 2 div nebeneinander?

mfg

sejuma

Zunächst mal hast du 1.370 Pixel in der Breite. Das ist zu viel. Ich machs mal in Prozenten. Dann hast du wie bereits gesagt eine Box in der Box. Wenn du die #main links haben willst, musst du noch ein float:left; eingeben und außerdem den HTML-Code umstellen:

CSS:

Code

#main { 
 width:70%; 
 height: 400px; 
 float:left;
 background-color: #990099; 
 text-align: right; 
} 


#nav { 
 width:28%; 
 height: 400px; 
 background-color: #F6F6F6; 
 text-align: right; 
}

Alles anzeigen

HTML

Code

<div id="main"> maintextxxxxx</div>
    <div id="nav"> navitextxxxxxxxxxxxxxxxxxxxxxxxxx
    </div>

ad3nau

erstmal danke für deine antwort. ich wollte jetzt die seite zentriert haben, da hab ich mir gedacht, das man es so schreiben kann:

Code

#main {
 width: 600px;
 height: 400px;
 float:left;
 background-color: #990099;
 text-align: right;
}


#nav {
 width: 170px;
 height: 400px;
 background-color: #F6F6F6;
 text-align: right;
 float: left;

Alles anzeigen

doch jetzt wird es an den linken rand gesetzt. habe es auch schon anders probiert, doch meistens ist dann der nav bereich wieder unter dem main bereich.
ich hoffe es kann mir noch einer helfen.

mfg

sejuma

Sorry, das war mein Fehler:
Nimm mal beim navitextxxxxxxxxxxxxx einige x raus oder mach einige Leerzeichen rein, dann geht's.
edit:
weitere Möglichkeit:

setz um die Boxen noch eine zusätzliche indem du
anfangs

Code

<div align="center">

und am Ende

Code

</div>

eingibst.

ad3nau

um das mittig zu bekommen muss ich ja dsa float: left aus dem main bereich rausnehmen, doch dann ist es wieder alles untereinader. deine tips von oben habe ich auch schon probiert, leider haben sie nix geholfen.

mfg

Lizzard

Hi,

mach um deine beiden DIVs ein weiteres DIV rum, mit "margin: 0 auto;" und gib dem Body auch "Margin: 0 auto;" dann zentriert er alles.

MfG
LizZard

ad3nau

hab es jetzt so probiert: html:

Code

<div style="margin: 0 auto;">
	<div id="main"> maintextxxxxx


         </div>




         <div id="nav"> navx


         </div>
</div>

Alles anzeigen

und css:

Code

body {   
margin: 0 auto;
}


#main {
 width:600px;
 height: 400px;
 background-color: #990099;
 text-align: right;
}


#nav {
 width:170px;
 height: 400px;
 background-color: #F6F6F6;
 text-align: right;
 float:left;
}

Alles anzeigen

irgendwie funktioniert es immer noch nicht ...

mfg

sejuma

Letzter Versuch:
gib mal das als css-Code ein:

Code

body
 {    
text-align:center; 
} 


#main { 
 width:500px; 
float:left;
 height: 400px; 
 background-color: #990099; 
 text-align: right; 
} 


#nav { 
 width:120px; 
 height: 400px; 
 background-color: #F6F6F6; 
 text-align: right; 
 float:left; 
}

Alles anzeigen

Hab momentan nur nen alten IE 5.5 und damit geht's nicht. Sollte aber normal funktionieren. Ansonsten meld ich mich heut Abend nochmal wenn ich g'scheites Handwerkszeug habe.

GreenRover

das linke mit float: left und das rechte mit clear: right

sejuma

So, jetzt klappt's (zumindest bei mir)

CSS

Code

#container
{
width: 770px;
margin: 0 auto;
}


#main {
float:left;
 width:600px;
 height: 400px;
 background-color: #990099;
 text-align: right;
}


#nav {
 margin-left:600px;
 height: 400px;
 background-color: #F6F6F6;
 text-align: right;
}

Alles anzeigen

HTML

Code

<div id="container">
<div id="main"> maintextxxxxx
</div>
<div id="nav"> navx
</div>
</div>

zum Verständnis:
Der #container ist in der Breite so groß (bzw. einige Pixel größer, s.u. )wie die beiden Boxen #main und #nav. Durch margin 0 auto wird er horizontal zentriert.
Der #main wird durch float left linksbündig mit einer Breite von 600 px in den #container gesetzt.
Die #nav wird ebenfalls in den #container gesetzt. Der margin-left mit 600px. sorgt dafür, dass er direkt neben dem #main platziert wird.
Eine Breite braucht man nicht anzugeben, da er sich automatisch anpasst.
Allerdings: Bei einer Breitenangabe müssen (zumindest für den IE) 3px abgezogen werden, damit er nicht aus dem Container nach unten wandert (Hängt glaub ich mit Rechen-Rundungsproblemen beim IE zusammen).
Ich persönlich bevorzuge bei der Breitenangabe (width) %-Angaben statt Pixel. Das macht die Seite bei unterschiedlichen Bildschirmauflösungen flexibler und dynamischer, d.h. die Relationen bleiben gleich.

Never give up - CSS ist nur am Anfang schwer!

ad3nau

ich kann heute leider nichts ausprobieren da ich bei einen freund bin, aber ich vertraue dir mal.
ich gucke morgen nach ob es funktioniert.

mfg

ad3nau

heute habe ich es ausprobiert, es funktioniert
aber jetzt ist wie du oben schon erwähnt hast, zwischen den 2 divs ein bissl platz, da ich aber mit background-image im body arbeite, sieht man den background in in den stück.
kann man das irgendwie wegbekommen?

mfg

sejuma

Probier's nochmal mit Prozentangaben im CSS-Teil:

Code

#container 
{ 
width: 770px; 
margin: 0 auto; 
} 


#main
{ 
float:left; 
 width:78%; 
 height: 400px; 
 background-color: #990099; 
 text-align: right; 
} 


#nav
{ 
 margin-left:0;
 float:left;
 width:22%; 
 height: 400px; 
 background-color:#FF0000; 
 text-align: right; 
}

Alles anzeigen

ad3nau

super, jetzt geht es

Tags