CSS: inline und width funktionieren zusammen nicht

[switchon]

Hallo,

ich code gerade ein neues Homepage Layout, welches ohne Tabellen, nämlich nur mit Div-Container funktionieren soll.

Nun wollte ich für das 2 - Spalten Layout zwei Divs nebeneinander kriegen. Das habe ich mit inline geschafft.

Nun will ich, dass die erste Spalte 30 % der breite einnimmt und die andere den rest (70 %)

das habe ich alles per CSS so gelöst:

Code: Alles auswählen

.left_box {
width: 30%;
display: inline;
}

.right_box {
width: 70%;
display: inline;
}

Ich habe mal die Farbangaben usw. rausgenommen und nur den wichtigen CSS code gepostet.
Wenn ich die inline Attribute rausnehme funktionieren zwar die Breiteangaben, aber dann sind ja die Container untereinander und nicht mehr nebeneinander.

Aber bei dem jetzigen Code werden die Breitenangaben anscheinend ignoriert.


Vielen Dank im vorraus für die Hilfe
switchon

[Dr.Death]

Ich würde mal "float: left" und "float: right" probieren.

Siehe : http://www.css4you.de/wslayout1/index.html

[OnFire]

Ich halte hier Display: Inline für keine gute Idee. Versuch mal den beiden jeweils "float" werte zu geben, der linke dann ne höhe von 100% damit das gut klappt. Alternative könnten Frames sein, die sind eben nicht jedermanns Geschmack

[switchon]

vielen dank, das hat geklappt, jetzt habe ich noch "padding-left:4px;" hinzugefügt und alles hat sich alles verschoben

so sieht der code jetzt aus

Code: Alles auswählen

.left_box {
width: 30%;
display: inline;
float:left;
padding-left:4px;
}

.right_box {
width: 70%;
display: inline;
float:right;
padding-left:4px;
}

[OnFire]

Verschieben ist der Effekt, den Padding nun mal hat Versuch mal ob margin-left der Effekt ist, den du wolltest Wenn nicht schreib noch mal wie das aussehen soll.

[switchon]

ne, das geht leider nicht aus 2 gründen:

1) es verschiebt sich trotzdem alles

2) die container sind mit farbe gefüllt und ich will nicht, den gesamten container 4 pixel nach rechts verschieben, sondern nur den inhalt (die schrift) in dem container, da man mit margin auch den hintergrund (halt den gesamten container) verschiebt



du hast vorhin gesagt, du würdest das nicht mit display:inline lösen

bin ja offen für andere lösungsansätze

wie würdest du es denn lösen?

[switchon]

keiner ne ahnung?

[Dr.Death]

Mensch...mach doch noch einen CSS:

Code: Alles auswählen

.content {
padding-left:4px;
}

Und weise es einem neuen DIV Container innerhalb deiner beiden links und rechts boxen zu.

Du hast anscheinend noch nicht meinen o.g. Link verarbeitet...
...ansonsten wärst Du auch hier vorbeigekommen:
http://www.css4you.de/wslayout1/ex0006.html