Beste SD-ers,

Ik heb een vraagje..

Ik ben bezig met een website en zodra ik de browser kleiner maak, dan komt er een gebeelde (in dit geval een img) over de footer heen, bij een mini-laptop is dit sowieso het geval.

De container zieter als volgt uit:

div#container {
font-size: 1.2em;
height: auto !important;
margin: 0 auto;
min-height: 100%;
text-align: left;
width: 950px;


}

en de footer:

div.footer {
background: none repeat scroll 0 0 #0386B2;
border-top: 1px solid #333333;
color: #333333;
font-size: 11px;
margin-top: 30px;
padding: 20px 0;
text-align: center;
width: 100%;


}

Weet iemand wat hier gebeurt?
Dit probleem komt zowel bij Firefox, Internet Explorer als Google Chrome voor, dus het lijkt me geen browser probleem..

Voor een voorbeeld kunt u terecht op www.vindvacature.nl/jobberbase/public (deze is nog niet online!)

Overflow hidden; toevoegen aan de container?

Code:

div#container {
  overflow: hidden;
}

Het probleem is opgelost, hartstikke bedankt! Super!

Ik zou nog even alle line-height's goed instellen, want via opera mini, staat er nog een aantal dingen niet helemaal goed. Ik vermoed dat dit met de line-height te maken heeft.

Het gaat om die lijst met vacatures.

Daarnaast is overflow:hidden natuurlijk niet echt een nette optie. Zo verberg je alles als de content iets langer wordt, maar kan het ook zijn dat je iets maar voor de helft zichtbaar maakt doordat het half buiten de content valt en voor de andere helft niet.

Gebruik voor je container div altijd margin: 0px auto; en dan voor de div's die erin liggen float: left of right; dan krijgen de div's automatisch een goede hoogte mee. Dan hoef je ook niet met height: auto etc te werken, want levert inderdaad vaak problemen op.

Daarnaast is overflow:hidden natuurlijk niet echt een nette optie. Zo verberg je alles als de content iets langer wordt, maar kan het ook zijn dat je iets maar voor de helft zichtbaar maakt doordat het half buiten de content valt en voor de andere helft niet.

De optie overflow:hidden; levert geen problemen op bij de weergave van de tekst. Het is natuurlijk persoonlijk wat netjes is of niet netjes maar dit lost het probleem wel op natuurlijk.

Ik heb er idd een line-height in gezet, werkt hij nu beter?

De overflow:hidden werk wel, ik heb de footer ook een margin-top mee gegeven, zodat het er boven blijft.

@jonathan: als de tekst meer is dan dat er in de div past, dan haalt hij ook tekst weg. Of je ziet een tekst regel voor de helft (als de line-height en hoogte van de div niet goed berekend zijn).

En het is inderdaad wel een oplossing, maar het is natuurlijk mooier als de pagina mee rekt en dat dan alles goed blijft staan. Maar goed, het is maar wat je zelf wilt toepassen.