[CSS] div met variable height (user decision)

[Schonhose]

Ik zit met het volgende probleem. Beschouw de volgende situatie:

code:

--------------------------------------------------------------
|                                                            |
|   -----------   Content                                    |
|   | avatar  |                                              |
|   -----------                                              |
|                                                            |
|    -----------------------------------------               |
|    |          footer info                  |               |
|    -----------------------------------------               |
--------------------------------------------------------------

De buitenste (Content) is een div met de volgende CSS:

Cascading Stylesheet:

.News {
 /*Only for mozilla*/
 min-height: 80px;
 } 
/* reset for IE */
* html .News {height:80px}

de andere div, genaamd "avatar" heeft als CSS:

Cascading Stylesheet:

.Avatar {
  float: left;
  clear: left;
  height: 80px;
  border : dashed 1px;
  margin-right: 10px;
}

Deze Div float links zodat de tekst er mooi om heen gaat. In de News Div staat namelijk een tekst.

Voor de voledigheid de CSS van de Footer:

Cascading Stylesheet:

.NewsFooter {
 width: 80%;
 position: relative;
 font-size : 11px; 
 font-family : verdana, arial, courier, sans-serif;
 }

Het probleem is als volgt. De News Div past zijn minimale hoogte niet automatisch aan aan de hoogte van de Avatar Div. Wanneer er weinig tekst in staat heeft dit tot gevolg dat de Avatar Div over andere Elementen (Footer) gaat floaten die ook nog in de News Div staan.

Om dit op te lossen heb ik de hoogte van de Avatar Div op 80px gezet en de minimale hoogte van de container (News) ook op 80px.

Mocht de content nu groter zijn dan wordt dit automatisch aangepast. Tot zover werkt alles goed met deze oplossing.

Maar nu komen de problemen. De 80px height van de Div Avatar (en indirect in de Div News) hangt eigenlijk af van de grote van het plaatje. Deze grenzen kan de gebruiker opgeven. (height & width)

Stel nu dat een grens wordt ingesteld met een hoogte van 60px dan hou je ineens 20px meer wit ruimte over. Op zich niet zo'n probleem.

Een ander verhaal wordt het wanneer 150px wordt aangehouden. De ruimte van 80px is niet toereikend en de Div Avatar zal weer over de content liggen die onderin de Div News staat.

Uit een zoektocht zowel met Google als met GOT blijkt dat het gebruik van variabelen in een CSS niet voldoet aan de standaard. Aangezien ik hier wel aangebonden ben moet ik dus een andere oplossing zoeken.

Een van deze oplossingen is het appenden van informatie (in dit geval de CSS voor de Div Avatar) aan de CSS file. Dit gaat 1 keer goed (de eerste keer).

Maar stel dat de admin de grootte vervolgens veranderd? Dan moet de CSS aangepast worden. Appenden lukt niet aangezien de informatie er dan 2 keer instaat. Je zult dus eerst de oude info moeten verwijderen.

Geen idee hoe dat moet

Maar misschien denk ik te moeilijk en kan het simpel aangepast worden in de CSS...

^{Wat een start post}

[ Voor 4% gewijzigd door Schonhose op 07-07-2004 10:04 ]

[djluc]

Ik vind het een hele uitgebreide startpost maar snap je probleem nog steeds niet echt. Als een div meer inhoud heeft dan er in past zal deze toch gewoon uit gaan rekken?

[Woudloper]

Is dit probleem min of meer niet besproken in dit artikel op A List Apart?

Tenminste zoals jij het nu omschrijft komt het op deze manier op mij over!

[T-MOB]

Het kan inderdaad makkelijk in de CSS... Als je aan de footer-div clear: both meegeeft zou het goed moeten gaan.

[Schonhose]

djluc schreef op 07 juli 2004 @ 10:16:
Ik vind het een hele uitgebreide startpost maar snap je probleem nog steeds niet echt. Als een div meer inhoud heeft dan er in past zal deze toch gewoon uit gaan rekken?

Ja dat dacht ik ook. Een beetje het idee van child & parent. Maar zo werkt het dus niet.

Woudloper schreef op 07 juli 2004 @ 10:19:
Is dit probleem min of meer niet besproken in dit artikel op A List Apart?

Tenminste zoals jij het nu omschrijft komt het op deze manier op mij over!

Nee, ze hebben het daarover hoe je de achtergond van een column groter kan maken dan de inhoud van de div. Daar heb ik het niet over.

T-MOB schreef op 07 juli 2004 @ 10:27:
Het kan inderdaad makkelijk in de CSS... Als je aan de footer-div clear: both meegeeft zou het goed moeten gaan.

Het principe van een clear is me nog niet duidelijk, vooral niet wanneer je hem moet toepassen.

[Clay]

Als je een clear op een element zet gaat dat element zelf proberen om met de aangegeven kant NIET naast iets te komen staan dat float. Het gaat dan zolang omlaag tot het niet meer naast iets floatends staat. Meestal zal iets dat float dus ook zelf geen clear hebben.

[Schonhose]

Ok, dus in een float hoef je niet te clearen?

Aanpassing van CSS:

Content

Cascading Stylesheet:

.News {
 clear: both;
}

clear: both: toegevoegd
Hack met min-height verwijderd (niet meer noodzakelijk)

Avatar:

Cascading Stylesheet:

.Avatar {
  float: left;
  height: 80px;
  border : dashed 1px;
  margin-right: 10px;
}

clear : left verwijderd

Footer:

Cascading Stylesheet:

.NewsFooter {
 width: 80%;
 position: relative;
 font-size : 11px; 
 font-family : verdana, arial, courier, sans-serif;
 clear: both;
 }

clear: both: toegevoegd

[ Voor 87% gewijzigd door Schonhose op 07-07-2004 10:59 ]