Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

CSS zonder tabellen; 2 gelijke kolommen in omvattend blok

:ben:
12 antwoorden
  • Ik probeer in een lay-out zonder tabellen 2 even brede kolommen in een omvattend blok (met rand) te krijgen.
    Dit omvattend blok lukt me helaas niet.[code:1:349c5621a9]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xml:lang="nl" lang="nl" xmlns="http://www.w3.org/1999/xhtml"
    <head>
    <title>test</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css">
    #content { border: 5px solid Black; padding: 2em; background-color: Yellow; }
    #links { float: left; width: 50%; background-color: Blue; }
    #rechts { float: right; width: 50%; background-color: Red; }
    </style>
    </head>
    <body>

    <div id="content">
    <div id="links">
    <ol>
    <li>een</li>
    <li>twee</li>
    <li>drie</li>
    <li>vier</li>
    <li>vijf</li>
    <li>veel …</li>
    </ol>
    </div>

    <div id="rechts">
    <p>testje<br />testje</p>
    <p>testje<br />testje</p>
    <p>testje<br />testje</p>
    <p>testje<br />testje</p>
    </div>
    </div>

    </body>
    </html>[/code:1:349c5621a9]Dus het gele vlak wil ik graag laten doorlopen tot net onder de linker (blauwe) en rechter (rode) kolom.
    Wie geeft me een zetje in de goede richting? :roll:

    -Jos
  • Ik heb #content een height: 100% meegegeven en dat werkt het.

    En als je na de div rechts een clear: both; plaats wertk het ook.[code:1:068fdc4213]
    <p>testje<br />testje</p>
    </div>
    <div style="clear:both";></div>
    </div>
    </body>[/code:1:068fdc4213]
  • Harry bedankt ![quote:1433ccbd45="boesh"]#content een height: 100%[/quote:1433ccbd45]werkt alleen in IE, niet in Mozilla en Opera…
    [quote:1433ccbd45="boesh"]
    div #rechts een clear: both; plaats werkt het[code:1:1433ccbd45]
    <p>testje<br />testje</p>
    </div>
    <div style="clear:both";></div>
    </div>
    </body>[/code:1:1433ccbd45][/quote:1433ccbd45]werkt in alle drie… :D

    -Jos
  • Een andere manier: http://www.stijlstek.nl/archief/2004/05/17/houd-floats-in-bedwang
  • [quote:39895ecaf9=":ben:"]Een andere manier: http://www.stijlstek.nl/archief/2004/05/17/houd-floats-in-bedwang[/quote:39895ecaf9]
    Bedenkelijk, want die werkt alleen als je er een hack in zet. En of je hacks wilt gebruiken is een eigen keuze.
  • :P [quote:b0a9860363=":ben:"]Een andere manier: http://www.stijlstek.nl/archief/2004/05/17/houd-floats-in-bedwang[/quote:b0a9860363]Bedankt Ben.
    Vooral de uitleg op de gekoppelde pagina's heeft e.e.a. verhelderd.
    Het gaat bij mij slechts om één pagina en ik hou het dus bij een eenvoudige <div style="clear:both";></div> …[quote:b0a9860363="boesh"]Bedenkelijk, want die werkt alleen als je er een hack in zet. En of je hacks wilt gebruiken is een eigen keuze.[/quote:b0a9860363]Is die <div style="clear:both";></div> ook niet een soort hack?
    Toch min of meer een onvolkomenheid in CSS? :roll:
  • Niet in CSS, in browsers.
  • :roll: [quote:1e056ff72e="Anne"]Niet in CSS, in browsers.[/quote:1e056ff72e]Je hebt vast gelijk Anne.
    Omdat er -voor zover ik weet- geen enkele is die het goed weergeeft ging ik er vanuit dat het aan CSS lag… :-?

    -Jos
  • Het gebruiken van een semantisch zinloze div in de (x)html vind ik een ergere hack dan de pure css oplossing waar ik naar verwees. Ik denk dat Anne dat wel met me eens is.

    Bovendien is een hack-loze css oplossing mogelijk, als we dat gedrocht van een IE zouden kunnen uitsluiten. Maar om dat verrotte stuk software (dat om een of andere vage reden ook nog eens door de meerderheid van de internetbevolking wordt gebruikt) toch nog een beetje te laten doen wat wij willen, zullen we daar meestal hacks voor moeten gebruiken.
  • Ik zou het eigenlijk ook niet met floats oplossen. Ik heb altijd al een beetje een afkeer van floats gehad voor dit soort toepassing. Waarom weet ik eigenlijk ook niet precies.
    Je zou ook gewoon het linkervlak position:absolute mee kunnen geven en het rechtervlak een margin-left die zo groot is als de breedte van het linkervlak.
    Enige nadeel van deze techniek is dat je ervan uitgaat dat de hoogte van het rechtervlak groter is dan die van het linkervlak.

    Een andere mogelijkheid zou zijn (en misschien wel het beste) om display:table-cell te gebruiken, maar dat is helaas niet erg bruikbaar, omdat IE het niet ondersteunt.
  • [quote:d3add0fa35="jossan"]Omdat er -voor zover ik weet- geen enkele is die het goed weergeeft ging ik er vanuit dat het aan CSS lag… :-?[/quote:d3add0fa35]Dit is toch het effect dat je wilde? En inderdaad, de 'display' property zou ook prima gebruikt kunnen worden als het niet aan IE lag.
  • @ Anne
    Ik begrijp na herlezen :oops: van http://www.positioniseverything.net/easyclearing.html pas dat[code:1:d35d2146c5].clearfix:after {
    display: block; /* maakt er een "block"-element van mocht het om een "inline"-element gaan */
    clear: both;
    }[/code:1:d35d2146c5]zou moeten werken, de rest is om het ook in de [i:d35d2146c5]mindere[/i:d35d2146c5] browsers redelijk uit te laten zien…

    @ :ben: en Anne
    Ik ben overtuigd en heb het aangepast… :wink:


    Bedankt voor uitleg en geduld !
    -Jos

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.