PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
K

auto height in div werkt niet

Door Keven Vanovertveldt op 28-11-2017 20:23 gewijzigd op 28-11-2017 20:23
2.295 views
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.
R
Rob Doemaarwat
28-11-2017 21:23 gewijzigd op 28-11-2017 21:24
Een stukje HTML (met tekst) zou handig zijn, maar ik gok dat je zoiets hebt:
  <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:
  <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.

Thomas van den Heuvel
29-11-2017 09:27
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
30-11-2017 08:01
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:


.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Reageren

Inloggen om te reageren