3Spaltiges Layout

[Bleccer]

Hey ich wollt mal fragen ob ihr mir helfen könnt ich mach gerade ein 3spaltiges layout und die 3 spalten sind auch richtig positioniert auser die spalte was in der mitte sein soll hier mal der quell code:

/* --------------------------------------------------- Css Reset ------------------------------------------- */

* {
    padding: 0;
    border: 0;
    margin: 0;
    font-size: 100%;
}

/* --------------------------------------------------- Layout ------------------------------------------- */

#container {
  margin: 0 auto;
  width: 900px;
  background-color: rgb(255,255,153);
}

#mitte {
  width: 380px;
  text-align: center;
  background-color: rgb(255,204,255);
  position: absolute;
  }
  
#sidebarleft {
  float: left;
  width: 250px;
  background-color: rgb(255,204,255);
  position: relative;
}

#sidebarright {
  float: right;
  width: 250px;
  background-color: rgb(255,204,255);
  position: relative;
}

#footer {
  clear: both;
  width: 900px;
  background-color: rgb(255,204,255);
}

Srry bin noch ziemlich schlecht in css^^

 

[Imbericle]

Wo ist denn das Problem?

<div>BLAA</div>
<div>BLAA</div>
<div>BLAA</div>

(Das DIV ist keine Vorgabe, es kommt auf die Semantik an.)

und das CSS

div
{
float:left;
}

Mehr brauchst du nicht um Blockelemente in eine Reihe zu bekommen.

MfG

 

[threadi]

Und auf position: absolute verzichten - möglichst immer.

 

[Bleccer]

ähm ja^^

hab vllt bissel schlecht geschrieben also die linke und richte spalte sind richtig platziert nur die mittlere spalte ist über der linken spalte^^

und da weiß ich jetzt ned warum die ned in der mitte is xD

 

[aJunkie]

Mach alle position Angaben weg.

Im Prinzip sieht das bei dreispaltigen Layouts immer so aus:

#left {
float: left;
width:50px;
}

#right {
float:right;
width:50px;
}

#mitte {
margin:0 auto; // wobei man das nicht unbedingt angeben muss.
width:500px;
// clear:both;
}

<div id="left">
Hier die linke Box mit 50px Breite.
</div>

<div id="right">
Hier der Inhalt der rechten Box</div>

<div id="mitte">
Zuletzt kommt der DIV, der zentriert in der Mitte erscheinen soll.
Hier nach sollte man auch noch clearen.
</div>

<div style="clear:both;"></div>

 

[Bleccer]

hm..

ne das geht auch ned... immer die mittlere spalte... als würde sie den ganzen platz wegnehmen und die 2 anderen boxen die daneben stehen sollten sind immer darunter aber halt daneben-darunter xD ich prob mal die mitte auf display: box oder inline zu stezen

hm... ne

 

[Imbericle]

ne das geht auch ned... immer die mittlere spalte... als würde sie den ganzen platz wegnehmen und die 2 anderen boxen die daneben stehen sollten sind immer darunter aber halt daneben-darunter xD ich prob mal die mitte auf display: box oder inline zu stezen

hm... ne

Kann nicht sein. So wie ich es gepostet habe sind alle 3 auf gleicher Höhe neben einander. Du hast entweder irgendeinen rießigen CSS-Quelltext in dem du mit !important irgendwie komische Krütze definiert hast oder dein Browser ist hin / zu alt.

 

[Bleccer]

..

ja eig schon ich hab das ganze mit nem container auch noch positioniert damit die ganze webseite mittig platziert ist^^

Ps: ok i-wie gehts jetzt^^

hm.. aber jetzt is der text so komisch nach unten gezogen hier mal bild

http://img121.imageshack.us/img121/5875/unbenanntktc.png

ps: weiß schon warum danke für die hilfe

 

[aJunkie]

Ja, dann ist sind die left und right Boxen zu klein, dass da kaum ein Wort reinpasst.

Rechne so:

Gesamtbreite der Website:

body {width:1000px;}

Links und Rechts Box:

#left, #right {width:200px;}

Mitte:

#main {margin:0px 210px 0px 210px;}

Bissl Eigenbeteiligung?