[CSS] Vervelende overlap div's

[Verwijderd]

Ik hoop dat jullie mij kunnen helpen. Ik ben bezig een website te bouwen opgebouwd uit divs en met CSS. Ik kom ergens echter niet uit.

De fout is als volgt: in mijn content heb ik 2 soorten content: 1 over de hele breedte, en 1 in twee kolommen. Deze worden als kleine tabellen weergegeven dmv een border, zoals hieronder:


Nu wil ik onder de gesplitste content weer door kunnen gaan met de bovenste content, alleen dan doet hij dus moeilijk, zie hieronder:


Hij overlapt dus de headers van de split content.. Het rare is dat als ik tussen de divs een stukje tekst zet hij het wel doet, zie hieronder:


de html code van dat deel is als volgt:

HTML:

        <div id="content">
            <div id="content_header">
                Content Header
            </div>
            <div class="content_text">
                There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
            </div>
            <div id="content_split">
                <div class="split_left_content_header">
                    TEST en wat testen
                </div>
                <div class="split_right_content_header">
                    Dit is dan rechts
                </div>          
                <div class="split_left_content_text">
                    En de tekst in links tralalala
                </div>
                <div class="splitleft_right_content_text">
                    En de tekst rechts
                </div>
            </div>
            <div id="content_header">
                Content Header
            </div>
            <div class="content_text">
                There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
        </div>

en de css is als volgt:

Cascading Stylesheet:

#content {
    float: left;
    width: 543px;
    margin: 4px 0 4px 3px;
    }
    
#content_header {
        display: block;
        background: #A9C0CE url(../img/corner.gif) no-repeat top right;
        padding: 4px 3px 4px 8px;
        color: #FFFFFF;
        font: bold 1.0em Tahoma, Arial, Sans-Serif;
            }
            
    .content_text {
        padding: 4px 3px 4px 8px;
        border-left: 1px solid #A9C0CE;
        border-right: 1px solid #A9C0CE;
        border-bottom: 1px solid #A9C0CE;
        margin-bottom: 8px;
        }
    
#content_split {
        display:block;
        }
    
    .split_left_content_header {
        float: left;
        width: 257px;
        background: #A9C0CE url(../img/corner.gif) no-repeat top right;
        padding: 4px 3px 4px 8px;
        color: #FFFFFF;
        font: bold 1.0em Tahoma, Arial, Sans-Serif;
            }
    
    .split_left_content_text {
        float: left;
        width: 255px;
        padding: 4px 3px 4px 8px;
        border-left: 1px solid #A9C0CE;
        border-right: 1px solid #A9C0CE;
        border-bottom: 1px solid #A9C0CE;
        margin-bottom: 8px;
            }
        
    .split_right_content_header {
        float: right;
        width: 257px;
        background: #A9C0CE url(../img/corner.gif) no-repeat top right;
        padding: 4px 3px 4px 8px;
        color: #FFFFFF;
        font: bold 1.0em Tahoma, Arial, Sans-Serif;
            }
    
    .splitleft_right_content_text {
        display:block;
        float: right;
        width: 255px;
        padding: 4px 3px 4px 8px;
        border-left: 1px solid #A9C0CE;
        border-right: 1px solid #A9C0CE;
        border-bottom: 1px solid #A9C0CE;
        margin-bottom: 8px;
            }

Iemand ideeen over hoe dit op te lossen is of waar het door komt? Ik heb overal in de margins en paddings gezocht maar ik kan het echt niet vinden. Het lijkt erop alsof hij 'denkt' dat de tweede content_header aan de split_content_header geplakt moet worden ofzo

[ Voor 5% gewijzigd door Verwijderd op 18-04-2006 02:24 ]

[NMe]

Om te beginnen mist je laatste div een sluittag?

Verder vind ik het een beetje raar dat je compleet aparte divs gebruikt om headers aan te geven. Je kan toch gewoon een h# (waarbij # elk getal van 1-6 zou kunnen zijn) gebruiken? Ik zou simpelweg zoiets doen voor je eerste div:

HTML:

<div id="content_header">
   <h3>Content Header</h3>
   <p>
      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
   </p>
</div>

Dit zorgt ervoor dat alles wat bij elkaar hoort ook echt bij elkaar staat. Uiteraard moet je wel je CSS dan iets aanpassen.

[truegrit]

Het komt waarschijnlijk omdat de content_header geen float definitie heeft, waardoor hij dus "onder" de 2 halve blokjes komt, met het resultaat aldaar. Hetzelfde probleem heb ik ook vaak gehad, meestal maakte ik gewoon elke blok met een float definitie, ook al was het vrij zinloos. Iets van:

code:

.content_header {
    float:left;
    width:100%;
    ...
}

zou het probleem moeten oplossen, maar of het netjes is laat ik aan de experts over

[ Voor 2% gewijzigd door truegrit op 18-04-2006 02:32 . Reden: te laat ]

[Verwijderd]

Peepz hartelijk dank, over de <h> oplossing ga ik nog even nadenken (of dromen liever gezegd) maar de float oplossing heeft het in ieder geval ook opgelost! Nu kan ik EINDELIJK gaan slapen