Alignen van rechter kolom

[-W0kk3L-]

Ik heb het volgende probleem en ik weet bijna zeker dat iemand mij hier kan helpen. Op dit moment ben ik bezig om mijn website in wordpress sjabloon te gieten. Dit lukt aardig, alleen ik loop tegen een klein IE/Firefox verschilletje aan:

http://www.testconsultant.nl/wordpress

Als je de bovenstaande link opent in Firefox, dan ziet het er prima uit (voor zover de website al af is, en dat is nog lange niet ;-)). Open je de link in IE, dan wordt de rechter kolom rechtsonder de linker kolom geplaatst. Ik ben nog niet al te ervaren met CSS (aldoende leert men) en ik heb het vermoeden dat ik iets niet goed doe met de position. Kan iemand mij uit de brand helpen?

[ Voor 6% gewijzigd door -W0kk3L- op 02-12-2008 09:52 ]

[Verwijderd]

[b][message=31135954,noline]Kan iemand mij uit de brand helpen?

Als je hulp wilt, kan best beginnen met je css en html code hier te posten. Dat maakt het ons een stuk eenvoudiger je te helpen. Omdat ik ondertussen even voor je gekeken heb, zal ik ze maar voor je posten.

Cascading Stylesheet:

#left{
    position:relative;
    min-height:300px;
    float:left;
    margin-bottom:10px;
}
#right{
    position:relative;
    min-height:300px;
    float:right;
    margin-bottom:10px;
}

HTML:

<div id="left">
                        <div class="post" id="post-4">
                <div class="title1">Lorem ipsum dolor sit amet</div>
                <div class="text1"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas et lectus. Maecenas faucibus nonummy felis. Nulla in eros quis erat interdum consectetuer. Nullam libero libero, rhoncus in, accumsan at, varius id, mi. Donec vehicula fermentum ipsum. Sed lacinia, eros ut pulvinar aliquam, turpis erat laoreet neque, ut dictum metus erat nec augue. Vestibulum vulputate. Fusce porttitor, nisl eget posuere mollis, metus tortor aliquam ligula, in porta ligula purus sed augue. Nulla facilisi. Donec arcu velit, volutpat quis, mattis eget, sodales in, tellus. Suspendisse nonummy purus id nisi. Sed sodales. Integer imperdiet dui vitae urna. Aliquam semper purus eu turpis. Aenean fermentum dui eget orci auctor rutrum. Quisque lectus. Morbi eleifend. In hac habitasse platea dictumst.</p>

</div>              
                 Gepost op November 29th, 2008 <!-- by admin -->in <a href="http://www.testconsultant.nl/wordpress/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a> |   <a href="http://www.testconsultant.nl/wordpress/?p=4#comments" title="Comment on Lorem ipsum dolor sit amet">1 Comment »</a>            </div>
                    <div class="post" id="post-1">
                <div class="title1">Hello world!</div>
                <div class="text1"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas et lectus. Maecenas faucibus nonummy felis. Nulla in eros quis erat interdum consectetuer. Nullam libero libero, rhoncus in, accumsan at, varius id, mi. Donec vehicula fermentum ipsum. Sed lacinia, eros ut pulvinar aliquam, turpis erat laoreet neque, ut dictum metus erat nec augue. Vestibulum vulputate. Fusce porttitor, nisl eget posuere mollis, metus tortor aliquam ligula, in porta ligula purus sed augue. Nulla facilisi. Donec arcu velit, volutpat quis, mattis eget, sodales in, tellus. Suspendisse nonummy purus id nisi. Sed sodales. Integer imperdiet dui vitae urna. Aliquam semper purus eu turpis. Aenean fermentum dui eget orci auctor rutrum. Quisque lectus. Morbi eleifend. In hac habitasse platea dictumst.</p>

</div>              
                 Gepost op November 23rd, 2008 <!-- by admin -->in <a href="http://www.testconsultant.nl/wordpress/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a> |   <a href="http://www.testconsultant.nl/wordpress/?p=1#comments" title="Comment on Hello world!">1 Comment »</a>          </div>
                <div class="navigation">
            <div class="alignleft"></div>
            <div class="alignright"></div>
        </div>

    </div>

<div id="right">
            
            <div class="title2">Zoek op de site</div>
            <div class="text2"><form method="get" id="searchform" action="http://www.testconsultant.nl/wordpress/">
<label class="hidden" for="s">Search for:</label>
<div><input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Zoeken" />
</div>
</form>
</div>

            
            
            <div class="title2">Archieven</div>
            <div class="text2"> <a href='http://www.testconsultant.nl/wordpress/?m=200811' title='November 2008'>November 2008</a>
</div>

                            
            <div class="title2">Meta</div>
            <div class="text2">             <a href="http://www.testconsultant.nl/wordpress/wp-login.php">Log in</a><br />
                <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a><br />

                <a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a><br />
                <a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a><br />
                            </div>

            
                </div>

<div id="footer">Testconsultant.nl&nbsp;&copy;&nbsp;2008&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">Privacy Policy</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">Terms Of Use</a></div>
</div>

Je probleem zou moeten opgelost zijn door in de CSS niet te kiezen voor

Cascading Stylesheet:

position:relative

maar voor:

Cascading Stylesheet:

position:absolute;
left: . px;
top: . px;

zo plaats je je div op een vaste positie, onafhankelijk welke browser je gebruikt.
succes

[-W0kk3L-]

Geldt dat zowel voor de "left" als de "right" div? Ik heb "absolute" al eerder geprobeerd (wel zonder de left en top aanvullingen) en toen stond de footer ineens keurig tegen het menu aangeplakt

Enneh, sorry voor de source. Thnx voor het aanvullen!

[ Voor 13% gewijzigd door -W0kk3L- op 01-12-2008 20:19 ]

[Verwijderd]

Het is zoiezo het best om iedere div een postitie toe te kennen met

Cascading Stylesheet:

position: absolute;
left: ... px;
top: ... px;

Zo weet iedere browser waar iedere div moet staan. Als je de position: absolute; gebruikt, is het inderdaad niet erg zinvol om de left en top waarde niet mee te geven.

[wackmaniac]

Als je nu eens begint met het opgeven van een breedte aan je linker en rechter div:

Cascading Stylesheet:

div#links {
  width: 600px;
  float: left;
}
div#right {
  width: 200px;
  float: right;
}

Je zou, om het geheel goed te laten werken in IE de linker div een pixel kleiner kunnen maken. Dan zou het moeten werken.

Verwijderd schreef op maandag 01 december 2008 @ 20:24:
Het is zoiezo het best om iedere div een postitie toe te kennen met

Cascading Stylesheet:

position: absolute;
left: ... px;
top: ... px;

Zo weet iedere browser waar iedere div moet staan. Als je de position: absolute; gebruikt, is het inderdaad niet erg zinvol om de left en top waarde niet mee te geven.

Dat is in eenvoudige websites misschien leuk, maar als je wat gaat spelen met z-indexen dan geeft IE niet thuis als alles absolute is.

[ Voor 46% gewijzigd door wackmaniac op 01-12-2008 20:32 ]

[-W0kk3L-]

Helaas, met beide oplossingen wordt de layout van mijn site volledig gemangeld. Of er zit nog meer in mijn code wat dwars ligt, of de geboden oplossingen zijn niet 100% waterdicht. Suggesties?

[Verwijderd]

-W0kk3L- schreef op maandag 01 december 2008 @ 22:10:
Helaas, met beide oplossingen wordt de layout van mijn site volledig gemangeld. Of er zit nog meer in mijn code wat dwars ligt, of de geboden oplossingen zijn niet 100% waterdicht. Suggesties?

De manier van wackmaniac en die van mij werken juist. Waarschijnlijk heb je de antwoorden verkeerd begrepen. Ik zou zeggen, post de code, want nu kan je weinig hulp verwachten.

[-W0kk3L-]

Ik heb de oplossing van wackmaniac nu in de site zitten (letterlijk sleur/pleur actie en de linker div 2 pix kleiner gemaakt). Bij IE zie ik geen verschil (anders dan de marge van 10 px die ik nu ook even weggelaten heb). Bij Firefox komt de rechter kolom nu zelfs onder de footer te staan i.p.v. er boven.

[Verwijderd]

mijn dag kan niet meer stuk,...

-W0kk3L- schreef op maandag 01 december 2008 @ 22:39:
Ik heb de oplossing van wackmaniac nu in de site zitten (letterlijk sleur/pleur actie en de linker div 2 pix kleiner gemaakt).

Ok,...

Beste topicstarter,

Ik vraag me af wat je kennis over HTML en CSS is? Toen Wackmaniac dit bericht schreef verwachte hij dat u toch wat inspanning zou doen om na te denken:

wackmaniac schreef op maandag 01 december 2008 @ 20:28:
Als je nu eens begint met het opgeven van een breedte aan je linker en rechter div:

Cascading Stylesheet:

div#links {
  width: 600px;
  float: left;
}
div#right {
  width: 200px;
  float: right;
}

Wackmaniac gaf dit antwoord als voorbeeld. Copy-paste naar het betreffende CSS bestand kan dus niet werken omdat de rechter en linker dif uit het html bestand andere namen hebben dan in het Wackmaniac's voorbeeld... .

kortom, het antwoord op de vraag:
ID''links'' is niet dezelfde ID als ''left'',

Alweer, succes

[ Voor 12% gewijzigd door Verwijderd op 02-12-2008 00:11 ]

[mcDavid]

Het enige wat je nodig hebt is een linkerkolom en een rechterkolom die qua breedte naast elkaar passen, en de linkerkolom moet float:left hebben. Niet meer en niet minder. Ga niet met position:absolute kutten want dan raak je binnen de kortste keren het hele overzicht kwijt (en browsers vaak ook).

Het enige wat er dan ook mis gaat is dat van de linker kolom "float:left" niet goed gaat. Zet er eens !important achter.

Overigens zit in IE6 een vage bug waardoor de boel verspringt als je in de linker kolom een plaatje zet wat breder is dan de kolom-breedte. Het makkelijkst los je dat op door die linker kolom ook overflow:hidden te geven.

[ Voor 10% gewijzigd door mcDavid op 02-12-2008 00:44 ]

[-W0kk3L-]

Verwijderd schreef op dinsdag 02 december 2008 @ 00:10:
[...]

Ok, toen ik in de starttopic zei dat ik nog niet al te ervaren was in CSS, bedoelde ik daadwerkelijk CSS en geen engels/nederlands . Naampje over het hoofd gezien. Kan gebeuren.
Anyway, ook deze tikfout lost het probleem nog niet op. De !important toevoeging bied ook geen soelaas. Zou mij ook verbazen, aangezien ik geen gebruik maak van andere stylesheets die kunnen overrulen.

Ik heb het vermoeden dat de oorzaak van dit probleem niet zozeer binnen deze twee div's zit, maar er omheen. Ik heb ook de container al eens vergroot, de div's drastisch verkleind en de footer al een keer uitgeschakeld om te kijken of daar de oorzaak in zat. Maar helaas... Volgens mij is het echt maar een klein dingetje en zit ik er keihard overheen te kijken (net zoals die naamgeving ).

[ Voor 27% gewijzigd door -W0kk3L- op 02-12-2008 07:02 ]

[tonyisgaaf]

Bij mij op de Mac in Firefox 3.0.4 werkt het ook niet. Ik zie in Firebug dat je aan "div#right" überhaupt geen stijlen toekent. Hoe verwacht je dan dat het werkt?

Leer debuggen! Firefox i.c.m. Firebug is een goede start.

edit:
Twee tips:

• Geef iig de containers die moeten floaten (zoals de div#left en div#right) een margin en padding mee. Dit maakt het gedrag van twee gefloate containers in een andere container voorspelbaarder (cross-browser). Doe dit ook voor de container waarin gefloat wordt. (Totale breedte van een element in HTML strict is margin+width+padding).
• In navolging van het bovenstaande: je geeft nu alle elementen onder div#right een width mee. Je zult zien dat wanneer je de container een breedte meegeeft, je voor een groot aantal (block)elementen (zoals Hx, P) de breedte kunt definiëren d.m.v. de margin en padding. Scheelt een hoop werk als de container toch een pixeltje smaller moet...

[ Voor 61% gewijzigd door tonyisgaaf op 02-12-2008 09:13 ]

[-W0kk3L-]

Je hebt gelijk. Ook hier zat nog een tikfoutje in. Ik heb hem aan de praat! Thnx!
tonyisgaaf, bedankt voor de Firebug tip. Ik had er meteen plezier van

[ Voor 31% gewijzigd door -W0kk3L- op 02-12-2008 10:09 ]

[mcDavid]

Vreemd, als ik met stylish #left {float:left!important;} deed, werkte het wel.

[-W0kk3L-]

Dat zou kunnen hoor. Toen zat die tikfout er nog in. Ik probeer het hier nu uit met een lokale kopie (en dan gecontroleer met Firebug) en hier werkt het inmiddels wel. Vanavond de site even updaten. Nadeel van achter proxies werken op kantoor