auto height in div werkt niet

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Keven Vanovertveldt

Keven Vanovertveldt

28/11/2017 20:23:07
Quote Anchor link
Beste leden,

Ik heb het middenstuk van mijn template (inhoud gedeelte) een auto height gegeven, zodat deze auto. groter word als er meer tekst in komt. Maar dit gebeurd niet.

"inhoud_left" en "inhoud_right" zijn div's binnen de "inhoud" div.
De "inhoud" div heb ik zoals je hieronder kan zien, ook een min-height gegeven van 400px.
Dit werkt, maar die word NIET groter als er meer tekst bijkomt.

Iemand een idee?

Hier het css gedeelte:
.inhoud {
background-image: url(../images/inhoud_background.png);
background-color: #464543;
background-repeat: repeat-x;
border-left: 1px solid #666; /* OUD: border-left: 3px solid #666; */
border-right: 1px solid #666;
border-bottom: 1px solid #666;
width: 800px;
height: auto;
min-height: 400px;
margin: 0 auto;
text-align: left;
position: relative; top: 126px;
}

.inhoud_left {
width: 530px;
height: auto;
margin: 0 auto;
text-align: left;
float: left;
border: 0px solid #666;
}

.inhoud_right {
width: 265px;
height: auto;
margin: 0 auto;
text-align: left;
float: right;
position: relative;
top: 8px;
border: 0px solid #666;

Alvast bedankt.
Gewijzigd op 28/11/2017 20:23:55 door Keven Vanovertveldt
 
PHP hulp

PHP hulp

04/08/2020 21:35:25
 
Rob Doemaarwat

Rob Doemaarwat

28/11/2017 21:23:10
Quote Anchor link
Een stukje HTML (met tekst) zou handig zijn, maar ik gok dat je zoiets hebt:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
  <div class='inhoud'>
    <div class='inhoud_left'>
      Links
    </div>
    <div class='inhoud_right'>
      Rechts
    </div>
  </div>
En dat je in "Links" of "Rechts" een hele hoop tekst hebt, en dat die <div> wel groeit, maar de "inhoud" div niet.

Een quick fix is om net voor het eind van de sluiting van de "inhoud" div een "clear:both" div toe te voegen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
  <div class='inhoud'>
    <div class='inhoud_left'>
      Links
    </div>
    <div class='inhoud_right'>
      Rechts
    </div>
    <div style='clear:both'><!-- deze toevoegen --></div>
  </div>
Die zorgt ervoor dat de "inhoud" div altijd mee rekt met de er in liggende divs.
Gewijzigd op 28/11/2017 21:24:44 door Rob Doemaarwat
 
Keven Vanovertveldt

Keven Vanovertveldt

28/11/2017 21:33:54
Quote Anchor link
Dit is het idd.
Had deze nog nooit gebruikt :o
 
Thomas van den Heuvel

Thomas van den Heuvel

29/11/2017 09:27:20
Quote Anchor link
Een clear-div is meestal de oplossing bij floats idd :p. Weet trouwens niet of dat height: auto overal nodig is trouwens, de afmetingen van een div passen zich normaal gesproken al aan de inhoud aan, dus het lijkt mij niet nodig om dat expliciet in je CSS te vermelden. Hoe minder regels je hebt, hoe minder e.e.a. ook met elkaar kan conflicteren lijkt mij.
 
Jan Koehoorn

Jan Koehoorn

30/11/2017 08:01:03
Quote Anchor link
Een inhoudsloze div met clear:both is de ouderwetse manier om dit probleem op te lossen. De nieuwere manier is, om de parent div een class "clearfix" te geven, en dan vervolgens in je css:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.