[CSS + div] Divs vaste hoogte, maar ook uitrekbaar

[Verwijderd]

Beste tweakers,

Ik werk sinds kort met divs maar loop de hele tijd tegen een probleem aan met de hoogte.
Ik heb een div met het id "main". Deze wil ik graag 450px hoog hebben. Dit lukt gewoon. Maar nu wil ik als de tekst meer bestrijkt dan de 450px, dat de hoogte dan automatisch groter wordt.

Maar als de tekst minder is, moet hij wel 450px blijven. Dus height: auto; kan dus al niet.
Ik heb al gezocht naar oplossingen maar overflow is ook neit wat ik wil, ik wil geen scrollbalken. Het moet gewoon mee uitrekken. Kan dit met divs?

Ik weet dat het met tabellen wel lukt, daar werkte ik eerst mee.

Als het niet mogelijk is, is er een andere oplossing voor?

Alvast bedankt!

Mvg, Ralph K.

PS: Mijn div indeling:
<div id="container">

<div id="header">
<p><img src="img/header.gif" alt="" /></p>
</div>

<div id="menu">Menu</div>

<div id="main">
<p>Hier de hoofdtekst van de site. Geen inmain nodig!</p>
</div>

<div class="clear"></div>

<div id="footer">
<p>2006 Ralph Kootker. Alle rechten voorbehouden.</p>
</div>

</div>

(De main div moet dus uitrekken, maar de container ook, want daar staat hij in (die height is auto, dus dat gaat wel goed)

[ Voor 26% gewijzigd door Verwijderd op 25-09-2007 15:49 ]

[Kalief]

Vieze oplossing: zet er een uitgerekte transparante gif pixel in die 1 px breed en 450 px hoog is.

[Verwijderd]

min-height

[Verwijderd]

De min-height, wordt die ondersteunt door alle browsers? het werkt wel nml :-)

[T-MOB]

Min-height wordt niet ondersteund door IE < 7. Voor de toepassing waar jij het voor nodig hebt kun j voor IE<7 echter gewoon height: gebruiken. Als er meer content in het element staat zal IE < 7 het element gewoon oprekken.
Om CSS statements alleen voor een specifieke IE-versie in te zetten kun je gebuirk maken van conditional comments.

[Verwijderd]

Check deze oplossing eens.

[Verwijderd]

Verwijderd schreef op dinsdag 25 september 2007 @ 23:06:
Check deze oplossing eens.

Die vind ik tegenwoordig toch redelijk omslachtig en ranzig in de tijd van conditional comments.

[Verwijderd]

Deze oplossing werkt voor IE6+ & andere browsers:

Cascading Stylesheet:

#main {
  min-height:450px;
  height:auto !important;
  height:450px;
}

[Verwijderd]

En anders nog een echte hack (niet aan te raden):

Cascading Stylesheet:

selector {
   _height: 450px;     /* IE6 */
   min-height: 450px;
}

[disjfa]

Verwijderd schreef op dinsdag 25 september 2007 @ 23:26:
En anders nog een echte hack (niet aan te raden):

Geen hacks aanraden als er ook normale manieren zijn om mee om te gaan Gewoon conditional comments zeggen. Niet hacks. Die dingen zijn ranzig.

[Verwijderd]

disjfa schreef op dinsdag 25 september 2007 @ 23:27:
[...]

Geen hacks aanraden als er ook normale manieren zijn om mee om te gaan Gewoon conditional comments zeggen. Niet hacks. Die dingen zijn ranzig.

Mijn eerste reply in dit topic ging dan ook over conditional comments. En er staat bij de hack ook nog expliciet het niet zo te doen. Ik zie niet in waarom 'men' echter niet zou mogen weten welke hacks er zijn (om ze vervolgens nooit als ongewenste hack te herkennen). Ook kennis van verkeerde technieken is nuttige kennis

[RobIII]

@RalphK1987: Als je code post, gebruik dan code tags a.u.b.
Verder welkom @GoT

[Verwijderd]

Verwijderd schreef op dinsdag 25 september 2007 @ 15:46:

<div id="header">
<p><img src="img/header.gif" alt="" /></p>
</div>

Soort van off topic: waarom heb je een div, met daarbinnen een p en daar weer een afbeelding in? Waarom niet gewoon een h1 en die stylen met CSS (eventueel met link erin voor een klikbaar logo ofzo)? Zelfde effect, maar net iets netter wat mij betreft (en Google en andere alternatieve user agents hebben er ook nog iets aan)