Design mit div

[zerberos]

Hallo,

ich versuche gerade ein Design mit Divs zu erstellen

Und zar soll links das menü und rechts daneben der inhalt sein

Jetzt habe ich 3 div container

Einer div container der alles umschließt (Breite 100%). In diesen div sind zwei weitere div's

Jetzt hab ich ein Problem. Und zwar soll der menü div eine feste Breite haben. Sagen wir mal 20px. Der Inhalt div daneben soll dann variable den rest ausfüllen. Das bekomme ich aber irgendwie nicht hin. Hab schon versucht bei der Breite auto anzugeben, ds gibt es ber anscheinen nur bei der höhe

   <div style="width: 100%; height: 100px;">

            <div style="width: 50px; height: 100px; float:left; background-color:Aqua"></div>

            <div style="width:auto; height: 100px;float:right; background-color:Bisque"></div>

        </div>

Kann mir einer sagen wie ich das löse?

[Toothrot]

   <div style="width: 100%; height: 100px;">

            <div style="width: 50px; height: 100px; float:left; background-color:Aqua"></div>

            <div style="width:auto; height: 100px;float:right; background-color:Bisque"></div>

        </div>

Lass mal das width:auto sowie das float:right beim zweiten div weg.

Siehe auch SELFHTML: Stylesheets / CSS-basierte Layouts / Mehrspaltige Layouts

[geloescht_JesterDay]

Lass mal das width:auto sowie das float:right beim zweiten div weg.

Und füg einen margin-left hinzu der so breit ist wie das linke menü.

[zerberos]

Hallo,

jetzt hab ich das Problem das mein div wo das menü drinnen ist unter dem inhaltsdiv erst angezeigt wird. Hab mal ne skizze gemacht

Hier mein code:

<div style="height:100%;background-image: url(images/bg.jpg)">


<div style="height:auto; margin-left:163px"> Hier kommt der inhalt </div>


<div style="width: 160px">menü</div>


</div>

Und der div mit menü fängt halt erst unter dem div vom inhalt an. Es soll aber nebeneinander sein! Wie bekomme ich das hin?

[geloescht_JesterDay]

Dazu erstmal: Divs sind keine Tabellenzellen!

Standardmäßig ist ein Div ein Block-Element, d.h. es bedingt einen Zeilenumbruch, also eine neue Zeile.

Was du tun willst geht z.B. so:

<div style="height:100%;background-image: url(images/bg.jpg)">


<div style="height:auto; margin-left:163px"> Hier kommt der inhalt </div>


<div style="width: 160px; float: left;">menü</div>


</div>

Also so ganz grob.

Weiterhin sollte ich darauf hinweisen, dass height: 100% nur bedingt funktioniert und nicht für ein browserfüllendes div taugt (außer im Quirksmode, den wir ja aber vermeiden wollen ).

Wenn du dich mit CSS Layouts beschäftigen willst empfehle ich

Galileo Computing : Buch : CSS-Layouts

Das ist wirklich gut und geht auf die Layoutprobleme gut ein.

Keine Ahnung aber wie man das als CSS-Anfänger versteht.

Weiterhin kannst du dann auch einfach

YAML Builder | A tool for visual development of YAML based CSS layouts

verwenden um dir ein CSS-Layout zu basteln. (Der Autor des Buches ist auch der Autor der Seite, bzw. umgekehrt)

[zerberos]

Hallo,

hab jetzt beim Mneü float:left eingebaut. Das hat aber nichts gebracht

[geloescht_JesterDay]

Hallo,

hab jetzt beim Mneü float:left eingebaut. Das hat aber nichts gebracht

Hm, ja. wie gesagt erzwingt ein div einen Zeilenumbruch, nach dem div (oder eigentlich überhaupt Also ein div steht in einer eigenen Zeile).

<div style="height:100%;background-image: url(images/bg.jpg)">

<div style="width: 160px; float: left;">menü</div>

<div style="height:auto; margin-left:163px"> Hier kommt der inhalt </div>

</div>

Bearbeitet 24. Juni 2008 von JesterDay

[Forcid]

position:absolute wär hier das, was mir auf anhieb einfallen würde... schonmal probiert?