ccs/div size probleem

[ric0]

Ik heb een probleem, Ik heb een pagina met verschillende div’s nu wil ik dat als er meer tekst in de pagina gezet word. Dat de div dan “meegroeit ” dat heb ik gedaan door hem een min-heigt te geven. Maar nu gaat deze over mijn footer div heen. En ook wil ik dan mijn zij balken “meegroeien”

Heeft iemand hier een oplossing voor. Ik heb er een plaatje van het probleem bijgedaan. en zal ook mijn css code er bij doen.

owja die gekleurde strepen geven die borders van de div aan om het iets duidelijker te maken.

Als vast bedankt voor het kijken & meedenken

/************ De hele body************/
body {
    margin: 0px;
    padding: 0px;
    text-align: justify;
    font:  12px Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: black;
    background-color:#F0F0F0;
/*    border: 1px solid green;*/
    }

    span.trinano_color {
    color:#F36E21;
    }

/************************************************************************/

a:link{                    color: #F36E21;    text-decoration: none;}
a:visited{                color: #F36E21;    text-decoration: underline;}
a:hover{                color: #F36E21;    text-decoration: none;}
a:active{                color: #F36E21;    text-decoration: underline;} 
a.menu:link{            color: black;    text-decoration: none;}
a.menu:visited{            color: black;    text-decoration: none;}
a.menu:hover{            color: #F36E21;    text-decoration: none;font-weight: bold;}
a.menu:active{            color: #F36E21; text-decoration: underline;} 
a.menuselected:link{    color: #F36E21;    text-decoration: none;font-weight: bold;}
a.menuselected:visited{    color: #F36E21;    text-decoration: none;font-weight: bold;}
a.menuselected:hover{    color: #F36E21;    text-decoration: none;font-weight: bold;}
a.menuselected:active{    color: #F36E21; text-decoration: underline;font-weight: bold;} 

dl {list-style: none outside; margin: 0; padding: 0 0 0 0;}
dt {list-style: none outside; margin: 0; padding: 5pt 0 0 1.5em;}
dd {list-style: none outside; margin: 0; padding: 5pt 0 0 2em;}

/************************************************************************/

#Logo{
    width: 870px;
    height: 50px;
    margin: 0px auto;
    padding: 10px 0px;
    /*border: 1px solid red;*/
    }
#header{
    width: 870px;
    height: 130px;
    margin: 0px auto;
    padding: 0px 0px;
    /* border: 1px solid red; */
    }    
#menu {
    width: 870px;
    height: 26px;
    margin: 0px auto;
    padding: 5px 0px;
    background-color:#a9a9a9;
    /*border: 1px solid red;*/
    }
    
/*===========Left & Right zitten in Content =============*/

#content {
    width: 870px;
    min-height: 750px;
    margin: 0px auto;
    padding: 10px 0px;
    background-color:#F0F0F0;
    /*border: 1px solid red;*/
    }    
#left {
    float: left;
    min-height: 760px;
    width: 162px; /*moet naar 164*/
    margin: -10px auto;
    padding: 5px 5px;
    background-color:#C0C0C0;
    border: 1px solid green;
    }
#menu-left{
    float: left;
    min-height: 260px;
    width: 164px;
    margin: -5px auto;
    padding: 1px 0px;
    background-color:#C0C0C0;
/*    border: 1px solid red;*/    
    }        
#pbottom {
    float: left;
    min-height: 200px;
    width: 140px;
    margin: 455px auto;
    padding: 5px 5px;
    background-color:#C0C0C0;
    /*border: 1px solid green;*/
    }    
#tbottom {
    float: left;
    min-height: 75px;
    width: 140px;
    margin: -750px auto;
    padding: 5px 5px;
    background-color:#C0C0C0;
/*    border: 1px solid yellow;*/
    }    
#right {
    float: right;
    min-height: 760px;
    width: 162px; /*moet naar 164*/
    margin: -10px auto;
    padding: 5px 5px;
    background-color:#C0C0C0;
    border: 1px solid yellow;
    }    
#middel{
    float: left;
    min-height: 738px;
    width: 470px;
    margin: -10px auto;
    padding: 15px 25px;
    border: 1px solid red;
    }    
#footer {
    width:870px;
    height: 16px;
    padding: 5px 0px;
    text-align:center;
    background-color:#a9a9a9;    
    margin-right: auto;
    margin-left: auto;    
    border: 1px solid orange;
    }
    
/*=======================================================*/

 

[RoboticPro]

Je hoeft alleen maar bij de footer het volgende toe te voegen:

clear:both;

 

[ric0]

Bedankt , dan gaat de footer inderdaad naar beneden. Maar dan gaan die 2 zij balken nog niet mee. Iemand hier nog een oplossing voor ??

 

[voilajs]

Probeer in de linker en rechter kolom dit eens toe te voegen als het laatste element:

<div style="clear:both"></div>

 

[csshunter]

Dat zal vrees ik niet helpen om de achtergrondkleur van de linker- en rechterkolom mee naar beneden te trekken.
Je kan proberen de <body> de achtergrondkleur van de twee kolommen geven, en de middelste content-kolom zijn eigen kleur.
Dat gaat goed, voorzover het middelste vak nooit kleiner kan zijn dan de linker-/rechterkolom.
Als dat wel zo is, zal je waarschijnlijk je heil moeten zoeken in de "faux columns" ("valse kolommen") oplossing, waarbij je een verticale achtergrond-afbeelding invoegt in de body, die net doet alsof het kolommen zijn:

Met vriendelijke groet,
CSShunter

 

[voilajs]

En anders gebruik je toch gewoon een tabel? Scheelt een hoop gezeur en dat werkt altijd
Tabellen zijn er hoofdzakelijk niet voor bedoeld, maar ik gebruik ze nog steeds liever dan dat ik allemaal foefjes uit moet halen om de layout goed te krijgen.

Keep it simple

 

[csshunter]

En anders gebruik je toch gewoon een tabel? ... ik gebruik ze nog steeds liever dan dat ik allemaal foefjes uit moet halen ...

Ehm, volgens mij behoort het maken en vormgeven van kolommen tot de basiskennis van css. Zolang je het met die basiskennis prima af kunt, zou ik dat geen "foefjes" noemen.
Tenzij je alle css "foefjes" noemt.

• Look, Ma, No Tables!, hartekreet van Eric Meyer in 2002 (!).
• Tabellen uit het raam gooien, vertaling van het artikel "Throwing tables out the window" (2004) van Douglas Bowman.

Met vriendelijke groet,
CSShunter

 

[voilajs]

Wat je zegt klopt helemaal
Ik doelde ook meer op het "vaste kolommen" idee waarbij je een afbeelding gebruikt als achtergrondkleur voor de kolommen. Natuurlijk is het prima CSS, maar geef mij dan maar de flexibiliteit van een tabel.

 

[ric0]

Bedankt voor al jullie ideeën,

Ik heb het opgelost door met de achtergrond kleuren te gaan speelen.(faux columns) Ik had hier zelf nog niet aan gedacht.

super bedankt :thumb:

 

[grumbkow]

Bedankt voor al jullie ideeën,

Ik heb het opgelost door met de achtergrond kleuren te gaan speelen.(faux columns) Ik had hier zelf nog niet aan gedacht.

super bedankt :thumb:

Volgens mij als je om de 3 kolommen een div had gezet met de achtergrond kleur van de zijkanten en de middlste div zijn eigen achtergrondkleur wit had gemaakt was het prima uitgekomen.