Archief - Auto height met divs

Ik heb het volgende probleem, ik heb een site bestaande uit :

Een wrapper div gecentreerd op de pagina. In die wrapper zitten onder elkaar : een header, bgtop, bgmiddle, bgbottom en een footer.

Dit zijn allemaal relative div's gewoon onder elkaar. De bgmiddle heeft height:auto zodat deze schaalt naargelang de inhoud.

Wanneer ik gewoon tekst in de div zelf zet past hij de hoogte automatisch aan, geen probleem. Maar in die div zou een layout moeten komen met foto's en tekst. Vroeger zou ik dit in tables gedaan hebben, zoals geleerd op school , maar ik wil dit nu in divs doen.

Waarschijnlijk moet ik dan absolute divs gebruiken zodat ik deze kan positioneren in de relative div, maar van de moment dat ik dit doe schaalt de parent div (bgmiddle) niet meer mee.

Iemand die hiervoor een oplossing heeft?

Een min-height geven aan je bgmiddle zodat je lay-out er sowieso altijd in past?

Als de layout dan groter is als de min-height schaalt hij ook niet, dan staat de helft er niet op.

Kan je wat je al hebt online gooien? Is makkelijker.

Site staat onder Untitled Document

Hier de CSS stylesheet :

@charset "utf-8";
/* CSS Document */
html, body {
background-color:#ffffff;
height:99%;
}
a {
text-decoration:none;
color:#333333;
}
a:hover {
color:#999999;
}
#wrapper {
position:relative;
width:876px;
text-align:left;
margin:0 auto;
background-color:#ffffff;
height:auto;
padding:0;
}
#header {
position:relative;
width:876px;
height:100px;
background-color:#ffffff;
}
#logo {
position:absolute;
width:300px;
height:50px;
top:25px;
left:15px;
}
#menu {
width:400px;
height:20px;
position:absolute;
list-style-type:none;
list-style-position:inside;
top:40px;
right:15px;
text-align:right;
padding:0;
margin:0;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
}
#menu li {
margin-left:10px;
display:inline;
}
#bgtop {
position:relative;
width:876px;
height:20px;
background-image:url(bgtop.png);
background-repeat:no-repeat;
line-height:0px;
}
#bg {
position:relative;
width:876px;
height:auto;
background-image:url(bg.png);
background-repeat:repeat-y;
padding-bottom:10px;
}
#bgbottom {
position:relative;
width:876px;
height:37px;
background-image:url(bgbottom.png);
background-repeat:no-repeat;
line-height:0px;
}[/SPOILER]

Ik heb je ganse website eens herschreven, veel korter, veel duidelijker.

Je vindt hem hier.

Voorbeeldje met andere DIV's erin.


Mijn ervaring leert mij dat je best zover mogelijk afblijft van positioneringen. De meeste layouts kunnen makkelijk gemaakt worden zonder.

scipicore zei:

Ik heb je ganse website eens herschreven, veel korter, veel duidelijker.

Je vindt hem hier.

Voorbeeldje met andere DIV's erin.


Mijn ervaring leert mij dat je best zover mogelijk afblijft van positioneringen. De meeste layouts kunnen makkelijk gemaakt worden zonder.

Klik om te vergroten...

Knap! Ik veronderstel dat het probleem nu weggewerkt is? Dus doordat ik de divs positioneerde lukte het niet?

Ik ga nog enkele dingen testen, laat je het nog even online staan?

Fonskuh zei:

Knap! Ik veronderstel dat het probleem nu weggewerkt is? Dus doordat ik de divs positioneerde lukte het niet?

Ik ga nog enkele dingen testen, laat je het nog even online staan?

Klik om te vergroten...

Normaal gezien zou je nu geen problemen meer mogen hebben, tenzij je met floats en positioning begint te werken, dan kan het wel mislopen als je niet goed weet wat je doet.

En het is inderdaad door die positionering dat je problemen kreeg.

Gouden regel in css. Less is more!

Stel nu dat ik in de content links 3 foto's onder elkaar wil, met daarnaast tekst, dan kan ik geen positioning gebruiken zonder het om zeep te helpen?

Kan het dat de bakckground niet werkt op IE?

Soms krijg ik zin om terug te vallen op tabellen

Foto's met tekst
Meer tekst dan foto's

Die achtergrond is omwille van CSS3 dat da nie werkt in IE. Je zult dus ofwel moeten wachten tot IE CSS3 ondersteund of de methode gebruiken die je zelf al had gebruikt.

Dan moet je enkel voor de boven en onder div de hoogte en de background instellen.