[CSS] Content wordt onder sidebar geplaatst

[citexx]

Ik kamp al een maand met het zelfde probleem: de content van mijn site wordt onder de sidebar geplaatst.

Dit probleem doet zich alleen voor in IE6. In IE7 en FF werkt de site hele goed.

Zelf weet ik niet of het een HTML fout is of een css fout. Ik zat zelf eigenlijk te denken aan een css fout... Maar zeker weet ik dat ook natuurlijk niet.

url: www.fockit.nl

Code:

HTML:

<div id="page">

<div id="header">
    <div id="headerlink" onclick="location.href='http://www.fockit.nl';"></div> 

    
    <div id="sidebar">
        <ul>
                <li id="home"><a href="/index.php">Home</a></li>
                
        </ul>
                        
            
    </div>
<div id="content" class="narrowcolumn">CONTENT HIER</div>
</div>
</div>

Ik heb niet alle li's geplaatst omdat dat anders heel overzichtelijk wordt, maar die kan je wel gewoon bekijken op de site.

Cascading Stylesheet:

#sidebar {
    float:right;
    padding:0px 0 10px 0;
    margin: 0px;
    margin-right: 45px;
    width: 235px;
    display: inline;
    }
#content {
    font-size: 1.2em;
    float:left;
        }

Ik hoop dat jullie het weten

EDIT:
Server ligt er plotseling uit, ik ben mijn provider aan het bellen. Ik hoop dat dit zo snel mogelijk gefikst wordt, want met de site zien jullie beter het probleem.

Hier nog een screenshot:

Hij staat wel recht, maar eronder (dit is nog een oude)

[ Voor 12% gewijzigd door citexx op 01-11-2007 18:28 ]

[Fuzzillogic]

Site doet het nog/weer niet, maar waarschijnlijk heb je last van de double margin-bug van IE. Bij floats verdubbelt het stuk antiek de margins van de floaters, gratis en voor niets. Vaak kun je het oplossen door een padding te gebruiken ipv margin, dus padding-right: 45px; of een conditional comment waar je voor IE dan een halve marge opgeeft.

[citexx]

Site deed het inderdaad weer niet... Nu weer wel .

Ik heb dus even die margin naar padding verandert, maar zonder resultaat. Ziet er precies het zelfde uit.

Nu kan je de hele css zien en de hele HTML,d us misschien heb je er wat aan?

Edit:
Heb even na gevraagd, ze zijn bezig met de server aan het upgraden, dus hij ligt er af en toe uit... (meer er uit dan er in )

[ Voor 22% gewijzigd door citexx op 01-11-2007 20:17 ]

[Zillion01]

Ik zou die sidebar in de html na de content div zetten en dan left laten floaten. Je moet #content wel een width meegeven dan.

[citexx]

De content krijgt de width mee met de class narrowclomn.

Als ik sidebar onder de content te staan, dan gaat het op zich, alleen dan staat home,about etc. onder de header, en dat is wat ik niet wil hebben.

offtopic:
er is een nieuwe server geplaatst, dus hij is nu helemaal online

[The_Ghost]

Als je in IE 6 kijkt zie je dat de header net zo hoog wordt gemaakt als zijn content (IE 6 doet dat, ook al geef je een hoogte op.)
Een oplossing kan zijn de header position: relative mee te geven en je sidebar position: absolute.

Hierdoor zal je header niet meer hoger worden.
Ik heb niet gekeken of hier voor jouw ontwerp nog bezwaren aan zitten, zo op het eerste gezicht niet.

[Zillion01]

citexx schreef op vrijdag 02 november 2007 @ 16:48:
De content krijgt de width mee met de class narrowclomn.

Als ik sidebar onder de content te staan, dan gaat het op zich, alleen dan staat home,about etc. onder de header, en dat is wat ik niet wil hebben.

offtopic:
er is een nieuwe server geplaatst, dus hij is nu helemaal online

Dus dan position je dat absolute

[citexx]

Top jongens het werkt.

Voor de geïnteresseerde, de sidebar ziet er zo uit:

Cascading Stylesheet:

#sidebar {
    position:absolute;
    padding:0px 0 0px 0;
    margin: 0 0 0 10px ;
    padding-right: 45px;
    width: 235px;
    display: inline;
    
    }

Bij de header nog een Position: relative;

Super bedankt! Ik had er achter ook zelf nog achter kunnen komen, maar ik haat het om met positions te werken. Blijkbaar moet het toch af en toe