[CSS]3 kolom layout, clearen elementen in middelste kolom - Softwareontwikkeling

vrijdag 7 juli 2006 10:26

Acties:

Topicstarter

Ik zit met een probleem, waar ik even geen oplossing voor weet. Ik heb er vaker mee gezeten en wil er nu toch echt eens een oplossing (desnoods een workaround) voor. Liefst zou ik ook willen begrijpen waarom dit fout gaat.

Ik heb een 3 kolom layout welke ik met behulp van CSS vorm. De linker en rechter kolom laat ik floaten naast de middelste kolom. Dit gaat goed. Nu heb ik elementen in de middelste kolom zitten, die soms ook naast elkaar floaten. Het daarop volgende element moet echter onder de bovenste komen. Dat doe ik door te clearen. (clear: both;). Dit geeft een probleem, omdat de elementen daardoor onder de linker en de rechter kolom komen (op dezelfde hoogte als de onderkant).

Ik heb een zo simpel mogelijk voorbeeld gemaakt wat mijn probleem illustreert. (IE gaat niet goed met de floats en in het voorbeeld het ik geen rekening met IE gehouden, dus even in Firefox (of een andere browser

) kijken graag).

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Float test</title>
<style type="text/css">

div#container
{
    width: 800px;
    border: 1px solid black;
}

div#left
{
    float: left;
    width: 200px;
    border: 1px solid red;
}

div#right
{
    float: right;
    width: 200px;
    border: 1px solid blue;
}

div#center
{
    margin: 0 202px 0 202px;
    border: 1px solid green;
}

div.item
{
    border: 1px solid orange;
}

div.text
{
    border: 1px solid yellow;
}

div.image
{
    float: right;
    border: 1px solid purple;
}

div.clear
{
    clear: both;
}

</style>
</head>
<body>
    <div id="container">
        <div id="left">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
            Proin nibh. Phasellus fermentum bibendum velit.
            Curabitur facilisis. Quisque vitae libero ut ante sollicitudin nonummy.
            Nullam id metus vel dui feugiat blandit.
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
            Nulla egestas felis sit amet lorem. Aenean posuere massa sed erat.
            Fusce porttitor erat eget metus. Vivamus ac nunc.
        </div>
        <div id="right">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
            Proin nibh. Phasellus fermentum bibendum velit.
            Curabitur facilisis. Quisque vitae libero ut ante sollicitudin nonummy.
            Nullam id metus vel dui feugiat blandit.
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
            Nulla egestas felis sit amet lorem. Aenean posuere massa sed erat.
            Fusce porttitor erat eget metus. Vivamus ac nunc.
        </div>
        <div id="center">
            <div class="item">
                <div class="image">
                    [img]"http://www.google.nl/images/firefox/fox1.gif"/>
                </div>
                <div[/img]
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                    Proin nibh. Phasellus fermentum bibendum velit.
                </div>
                <div class="clear"></div>
            </div>
            <div class="item">
                <div class="image">
                    [img]"http://www.google.nl/images/firefox/fox1.gif"/>
                </div>
                <div[/img]
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                    Proin nibh. Phasellus fermentum bibendum velit.
                </div>
                <div class="clear"></div>
            </div>
            <div class="item">
                <div class="image">
                    [img]"http://www.google.nl/images/firefox/fox1.gif"/>
                </div>
                <div[/img]
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                    Proin nibh. Phasellus fermentum bibendum velit.
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
</body>
</html>

De pagina is hier te bekijken.

Als iemand een oplossing en eventueel een uitleg heeft, dan graag. Ik heb al gezocht, maar ik kon niet echt iets vinden dat er op leek.

[ Voor 10% gewijzigd door Michali op 07-07-2006 10:27 ]

Noushka's Magnificent Dream | Unity

vrijdag 7 juli 2006 11:21

Acties:

Verwijderd

Als je 'item' ook een float: left; geeft werkt het wel, omdat de divs dan automatisch naar beneden gezet worden. Maar misschien dat dit met een drukkere layout problemen geeft.

vrijdag 7 juli 2006 11:41

Acties:

Michali

Topicstarter

Ok, bedankt. dat werkt wel. Misschien enig idee waarom de clear dan een kleiner bereik heeft?

Als er nog andere oplossingen zijn, dan wil ik die graag horen. Voorlopig kan ik wel verder iig.

Noushka's Magnificent Dream | Unity

vrijdag 7 juli 2006 11:44

Acties:

frickY

Je zou ook kunnen proberen je 2de item, welke dus rechts van het eerste item staat, een clear; right te geven.
Maar het gedrag wat je omschrijft is volgens mij foutief gedrag van de browser. Heb je dit in zowel IE als FF?

[ Voor 3% gewijzigd door frickY op 07-07-2006 11:44 ]

vrijdag 7 juli 2006 12:32

Acties:

Michali

Topicstarter

In IE gaat het vreemd genoeg wel goed, het komt in Firefox voor, andere browsers heb ik nog niet geprobeerd. Je kunt het zelf zien in het linkje dat ik in de start post gaf.

Noushka's Magnificent Dream | Unity

vrijdag 7 juli 2006 13:07

Acties:

Clay

cookie erbij?

Bij mij gaat die in IE ook fout. De spec zegt dit:

http://www.w3.org/TR/CSS21/visuren.html#flow-control
This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.

http://www.w3.org/TR/CSS21/visuren.html#block-formatting
Floats, absolutely positioned elements, inline-blocks, table-cells, and elements with 'overflow' other than 'visible' establish new block formatting contexts.

De center div met de margin staat in de flow naast een float, en zit niet in een eigen block format context. Als er ergens in die div dus een clear staat, moet die logsich gezien de floats ernaast clearen. IE doet dit dan dus fout; op deze manier zou het onmogelijk zijn een float te clearen vanuit een geneste positie in de flow.

De oplossing is dan ook center ook de floaten; hij komt dan in zn eigen format context, en clears daarin slaan niet meer op de floats ernaast.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

vrijdag 7 juli 2006 16:10

Acties:

Michali

Topicstarter

Ok, bedankt Clay, naar zulke info was ik op zoek.

Als je in IE je de problemen met floats oplost, dan gaat het wel goed. In het voorbeeld gaat het idd. fout.

Noushka's Magnificent Dream | Unity