Pozicování na vršek a spodek DIVu s prostřední částí – CSS – Fórum – Programujte.com

Ahoj všem,
předem chci říct, že jsem se svépomocí snažil najít ideální řešení hodně dlouhých hodin, ale neúspěšně.

Moje přání - mám DIV rámec, u kterého zadám rozměry, v tomto divu bych potřeboval mít část pozicovanou nahoru, pak několik (pro jednoduchost zde 2 části) které se budou rovnat postupně od spodního okraje DIVu a ve zbylém místě mezi "horní" a "spodní" částí bych pak měl část, která by byla vertikálně centrovaná.
Obsah jednotlivých částí může být různě douhý text (jeden či více řádků) proto tedy nemůžu použít zadané margin či podobně (nebo si to alespoň zatím myslím). V prostřední části by měl být obrázek (jestliby to bylo z hlediska řešení podstatné)

Pokus o naznačení pro conejvětší zjednodučení je zde:
 

.ramec {
    float: left;
    width: 250px;
    height: 300px;
    border: 1px solid silver;
    margin: 2px;
    text-align: center;
}
 
<div class="ramec">
    <div class="">toto bych rád nahoře centrovaně</div>
    <div class="">tahle část velká tak aby zaujímala zbytek volného místa a obsah aby byl centrovám horizontálně i vertikálně</div>
    <div class="">první blok umístěný dole centrovaně (spodní kraj u horního kraje následujícího DIVu)</div>
    <div class="">druhý blok umístěný dole centrovaně (spodní kraj u spodního kraje DIVu "ramec") </div>
</div>

Moc děkuji všem za navedení a váš čas

- pouzij presne rozmery
- pouzij tabulku
- pouzij tabulkovy layout
Vsechno ostatni nez tabulka se ti rozsype, kdyz tam vlozis nespravny obsah treba s marginem. Tudiz nema smysl to pak resit pozicovanim, kdy mu casti a nebo floatovanim, kdy se ti to cele rozsype v ruznych prohlizecich a casto prave na marginu nebo paddingu.

Nicmene, na jakpsatweb neco podobneho se uz resilo. Vzdycky, kdyz tam nekdo navrhl nejake reseni, tak bylo plne forko prave dotazu, ze se jim to rozsypalo. Nicmene, ti moderatori furt to sve reseni obhajovali :) Nevim, jestli je reseni, ktere zpusobuje vic problemu nez resi, vhodne zrovna pro zacatecniky...
https://www.google.com/search?…

 

* jo, tabulku, myslim html TABLE TR TD s css border=0 borderspacing=0 a tusim jeste necim pro dalsi prohlizece
* tabulkovy layout je css3 display:table, display:table-cell, display:table-row...