Bij 'height: auto;' div uit de div

[apellsientje925]

Hallo,

Als ik

height: auto;

gebruik, gaat de div uit de contentbox, wanneer ik een bepaalde waarde invoer blijft hij er wel in, iemand enig idee?
CSS Contentbox:

#container {
  height: auto;
  width: 782px;
  text-align: center;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  margin: auto;
  background-image: url('http://habso.nl/8/images/container.gif');
  position: relative;
  word-wrap: break-word;
}

HTML:

<div id="container"><div id="left"><div id="small_header"></div></div></div>

MVG

 

[csshunter]

Hoi apellsientje925,

iemand enig idee?

Nee, want we weten niet wat de css van de <div id="left"> en de <div id="small_header"> is.
Kan je die ook even geven?
Of, nog beter, een link naar een testpagina?

Met vriendelijke groet,
CSShunter

 

[apellsientje925]

Oke, hier een link: http://habso.nl/8/layout.php

 

[csshunter]

Hoi apellsientje925,
Juist!
De html-structuur is nu:

<div id="header"></div>

<div id="menu_bg"></div>

<div id="container">
    <div id="left">
	... met {float:left;}
    </div>
    <div id="content">
        ...
    </div>
</div>

<div id="container_bottom"></div>

Hier komt het idee: als je twee kolommen naast elkaar wilt hebben, waarvan er één gefloat is, moet je een "clear" toepassen om weer onder de hoogste van de twee kolommen terecht te kunnen komen.
Deze "cleart de float" (schoont 'm op), zodat er niets naast kan komen, maar er onder doorgegaan moet worden.
Dan wordt het:

<div id="header"></div>

<div id="menu_bg"></div>

<div id="container">
    <div id="left">
	... met {float:left;}
    </div>
    <div id="content">
        ...
    </div>
    <div class="clearB"><!-- bodempje leggen --></div>
</div>

<div id="container_bottom"></div>

Met in de css:

#content {
    margin-left: 170px; 
    /* iets meer dan de breedte van de float,
        zodat niet onder de float doorgegaan kan worden 
        met de content-tekst */

.clearB {
    clear: both; /* cleart zowel de floats-left als floats-right erboven */
}

• Floep: test-habso8.htm

Met vriendelijke groet,
CSShunter
___________
O ja, het background-img voor de #content hoeft niet; dan kan ook met een bordertje geregend worden. Scheelt weer wat pagina-snelheid.

 

[apellsientje925]

Bedankt! Die pagina mag je nu wel weer verwijderen. Nogmaals bedankt!

 

[csshunter]

Okidoki!
Maar ik laat 'm er graag in staan, dan kunnen andere forum-bezoekers met hetzelfde probleem zien hoe deze opgelost is. Daarom staat ook de oorspronkelijke code er als commentaarregels in, zodat als jouw testpagina weg is, men toch het probleem kan zien.
En met een <meta name="robots" content="noindex, nofollow" /> had ik 'm al uit Google gehouden, dus alleen mensen die in deze draad zitten kunnen er bij komen.

Met vriendelijke groet,
CSShunter

 

[apellsientje925]

Oke