[CSS] float left en right i.c.m. strict - Softwareontwikkeling

zondag 3 oktober 2010 00:46

Acties:

Topicstarter

ik wil op een website twee kolommen met blokken (div's, ul's, etcetera) maken, eentje links en eentje rechts. Nu dacht ik dat simpel op te lossen met floats, maar blijkbaar doe ik iets fout. In onderstaande testcase wil ik de gekleurde div's links gepositioneerd hebben, netjes onder elkaar. En de zwart/witte div's wil ik rechts gepositioneerd hebben, netjes onder elkaar. Als ik de doctype STRICT verwijder, ziet het er precies zo uit zoals ik wil. Maar ik wil graag de doctype STRICT behouden. Iemand enig idee? (de hoogte van de div's is in dit voorbeeld hard ingesteld, maar is in de praktijk variabel)

Testcase:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        body {
            background-color: pink;
        }

        #container {
            float: left;
            display: block;
            width: 450px;
        }

        #A {
            display: block;
            float: left;
            clear: left;
            width: 100px;
            height: 80px;
            background-color: red;

        }
        #B {
            display: block;
            float: left;
            clear: left;
            width: 100px;
            height: 80px;
            background-color: green;
        }
        #C {
            display: block;
            float: left;
            clear: left;
            width: 100px;
            height: 80px;
            background-color: blue;
        }
        #D {
            display: block;
            clear: right;
            float: right;
            width: 200px;
            height: 50px;
            background-color: black;

        }
        #E {
            display: block;
            clear: right;
            float: right;
            width: 200px;
            height: 120px;
            background-color: white;

        }
        #F {
            display: block;
            clear: right;
            float: right;
            width: 200px;
            height: 50px;
            background-color: black;
        }
    </style>
</head>
<div id="container">
    <div id="A"></div>
    <div id="C"></div>
    <div id="B"></div>
    <div id="D"></div>
    <div id="E"></div>
    <div id="F"></div>
</div>
</html>

zo ziet het er uit met doctype STRICT:
Afbeeldingslocatie: http://www.formulaworld.com/got/strict.jpg

zo ziet het er uit zonder doctype STRICT: (zo wil ik het dus hebben, maar dan wel met doctype STRICT)
Afbeeldingslocatie: http://www.formulaworld.com/got/notstrict.jpg

Afbeeldingslocatie: http://www.formulaworld.com/got/notstrict.jpg

zondag 3 oktober 2010 01:17

Acties:

Ssander

Wanneer je een linker en rechter kolom naast elkaar wilt hebben, moet je gewoon zorgen dat je hiervoor twee wrappers maakt. Anders maak je het jezelf alleen maar veel te ingewikkeld.

HTML:

<div id="container">
    <div id="wrapA">
             <div id="A"></div>
             <div id="C"></div>
             <div id="B"></div>
    </div>
    <div id="wrapB">
             <div id="D"></div>
             <div id="E"></div>
             <div id="F"></div>
    </div>
</div>

Met de volgende style;

Cascading Stylesheet:

1	#wrapA { float: left; } #wrapB { float: right; }

Zoek ook eens op google naar [url=http://http://www.google.nl/search?q=css+column+layout]css column layout[/url] voor meer voorbeelden.

Reageer