2,3-spaltiges Layout.

html.de-Forum HTML, XHTML & CSS
1

Hallo, es kann sein, dass es in HTML so nicht möglich ist, oder ich habe en Brett vorm Kopf, bitte helft mir, und sagt mir, was davon der Fall ist.
Mein Wunsch ist der folgende:
Ich habe ein 2-spaltiges Layout. In die Mitte soll ein Bild zwischen diese spalten, ins Zentrum. Wie mache ich das?
Die Sache ist die: Die rechte Seite hat eine definierte Breite, die linke nicht! Die linke Seite soll genau so dick sein, dass 100% ausgefüllt werden, während die rechte Seite 236px breit sein soll. Die Angabe right kann ich nur geben, wenn ich das DIV absolute positioniere (oder fixed, was schlimmer ist). Ich hatte es bisher immer so mit den mehrspaltigen Seiten gehalten: Ich habe die DIVs absolute positioniert und dann mit top, right, left die genau gesetzt. Wenn ich das hier auch mache, bekomme ich folgende Schwierigkeit:
Der 3-Spaltige Teil liegt unter dem absolut positioniertem Text. Wenn ich den auch absolute positioniere, was ja im Prinzip möglich ist, komme ich zu der Schwierigkeit, dass ich die Höhe des oberen Teils nicht mit Gewissheit sagen kann. Da die Seite für ein Behindertenzentrum ist (ich mache das ehrenamtlich, und komm nicht weiter wein), ist es natürlich wichtig, dass ich nicht mit Tabellen arbeite, da dies blinde verschreckt. Andererseits muss ich davon ausgehen, dass ein halb blinder den Text so vergrößert, dass der obere Teil eine unvorhergesehene Größe erhalten kann.
[ATTACH]1679.vB[/ATTACH]
Ich habe mal ein Bild hochgeladen, wie ich mir das vorstelle. DIV 1 soll dabei von der Breite her 100% minus der Breite von 2 nehmen. Die Höhe von DIV 1 ist unbekannt. DIV 2 hat eine bekannte Höhe und Breite.
Div 3 soll von der Breite her alles nehmen, was die anderen beiden DIVS nicht nehmen. Die Höhe von DIV 3 ist aufgrund dessen, dass ein Text-DIV ist, unbekannt. Die Breite und Höhe von DIV 4 und 5 sind bekannt.

Ich steh echt vor nem Rätsel!

2

Willkommen im Forum.

In etwa so?

[html]

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Demo</title>
    <style type="text/css">

/**

#row1 {
background: #0c0;
}

#div1 {
background: #c00;
margin-right: 236px;
}

#div2 {
background: #00c;
float: right;
width: 236px;
height: 200px;
}

#row2 {
background: #cc0;
}

#div3 {
padding: 1em;
background: #0cc;
margin-right: 300px;
}

#div4 {
background: #c0c;
width: 200px;
float: right;
}

#div5 {
background: #990;
width: 100px;
float: right;
}

    </style>
</head>

<body>        
    <div id="row1" class="clear">
        <div id="div2">#div2</div>
        <div id="div1">#div1</div>
    </div>

    <div id="row2" class="clear">
        <div id="div4">#div4</div>
        <div id="div5">#div5</div>
        <div id="div3">
            <p>#div3</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed enim mi, sed dapibus lectus. Donec sagittis urna vel tellus pharetra scelerisque. Morbi nunc tortor, vestibulum a commodo in, tincidunt et sapien. Mauris bibendum iaculis nisi, id suscipit felis scelerisque sed. Donec nibh mi, aliquam ac dapibus vel, facilisis pellentesque sem. Ut ac tortor in mauris sodales ultricies aliquam eu magna. Curabitur imperdiet tellus sed dui mollis in consectetur leo ornare. Donec id odio id tellus sagittis lacinia. Phasellus gravida dolor in nisi laoreet vel placerat sem tincidunt. Morbi rhoncus enim non est bibendum tincidunt. Nam dictum pharetra leo, vitae venenatis metus aliquet eu. Pellentesque in mauris ante. Nunc arcu justo, semper non lobortis nec, fermentum ut odio. Ut aliquet porttitor sapien ut blandit. Sed justo leo, tristique vitae rutrum ut, cursus id erat. Nunc sagittis imperdiet nunc, ac mollis velit consequat id.</p>
            <p>Integer commodo justo erat, eu vehicula nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempus, lorem ut tristique consequat, urna neque egestas odio, sed elementum ante nisl ac nisi. Aenean vulputate, quam vitae sollicitudin semper, massa ante convallis risus, eu dapibus lectus dui consequat lectus. Vivamus at arcu ac felis fringilla fringilla non consequat magna. Vestibulum egestas interdum odio eget sagittis. Aliquam feugiat condimentum ullamcorper. Quisque sit amet ipsum consectetur ligula dignissim sodales. Maecenas ultricies, dui eu ultrices placerat, elit est malesuada augue, id feugiat dolor est quis quam. Suspendisse potenti. Donec hendrerit neque in ligula egestas facilisis. Cras turpis augue, tempus non dapibus non, rutrum ac dui. Praesent vel ipsum semper velit dictum facilisis ac eu nisl. Mauris varius laoreet commodo. Vivamus sodales nisi eu arcu pharetra in vulputate risus imperdiet. Praesent lacinia, tellus placerat fermentum posuere, erat sem auctor sapien, sed tincidunt leo diam non ligula. Mauris at lectus et ligula tempor vulputate.</p>
        </div>
    </div>
</body>
[/html]