[CSS] Positioning mislukt

[Reveal!]

Ben er al uren zoet mee, alles geprobeerd en kom er niet uit !
Heb onderstaande CSS code...
Een container met header, footer en een navigatie column rechts en een content column links.
Voor een reden onbekend bij mij breekt de rechter column uit de container....
De container groeit dus niet mee naar beneden, de tekst gaat gewoon over de footer heen, uit de container.
Ik heb geprobeerde de antere container te floaten, ik heb absolute postioning geprobeerd maar hij blijft eruit gaan...
Iemand enig idee ?

code:

div.container
{
background-color:#FFFFFF;
width:760px;
margin:20px auto 0px auto;
border:1px solid gray;
text-align:left;
line-height:150%;
position:relative;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.content
{
margin-right:190px;
border-right:1px solid gray;
padding:1em;
}
div.right
{
float:right;
width:160px;
padding:1em;
}

[Digihelp ®]

Probeer eens

Cascading Stylesheet:

overflow: hidden;

aan je container mee te geven. In combinatie met width zorgt dit ervoor dat de float elementen ook worden meegerekend.

Overigens is die margin-right op je content waarschijnlijk niet de bedoeling. Tevens is het soms handiger om juist de content een float: left mee te geven ipv de rechterkolom een float: right.

[ Voor 37% gewijzigd door Digihelp ® op 26-04-2006 18:29 ]

[Sappie]

Wat html zou natuurlijk ook wel handig zijn; een online voorbeeldje zo mogelijk nog handiger

Verder.. in welke browser gaat het fout?

[JHS]

Digihelp: Je bedoelt overflow: auto; neem ik aan . Met hidden is er niet zo veel zichtbaar .

[Digihelp ®]

Nee ik bedoel echt hidden. Alles blijft dan gewoon zichtbaar zolang de totale width van de inner divjes niet groter is dan de width van de container. Kijk maar eens op http://www.digihelp.nl voor het effect.

Weet niet of het met auto ook werkt, even geen tijd om te proberen.

Edt: met hidden moet je idd wel je content div ook een width meegeven. Als het om een liquid design gaat dan moet er een andere oplossing gevonden worden, wellicht jouw overflow: auto;

[ Voor 24% gewijzigd door Digihelp ® op 26-04-2006 18:41 ]

[JHS]

Digihelp: Het ging om groeien in de lengte, en niet in de breedte volgens mij : "De container groeit dus niet mee naar beneden, de tekst gaat gewoon over de footer heen, uit de container." Zie overigens ook deze testcase, misschien dat dat het wat duidelijker maakt .

[Verwijderd]

Zonder je html erbij is het onbegonnen werk om hier iets zinnigs over te zeggen.

[joggie]

bestaat er niet een wordwrap voor in css?

*edit

ff gezocht:
http://msdn.microsoft.com...e/properties/wordwrap.asp

miss is dat wat

[ Voor 61% gewijzigd door joggie op 26-04-2006 21:03 ]

[Reveal!]

Verwijderd schreef op woensdag 26 april 2006 @ 20:58:
Zonder je html erbij is het onbegonnen werk om hier iets zinnigs over te zeggen.

Ben morgen weer bij me plek ... maar het is eigenlijk exact hetzelfde als in dit voorbeeld,

http://www.w3schools.com/...sp?filename=trycss_float6

verander daar bij div.left de float van left naar right, voeg wat tekst toe en (of haal wat weg bij content) en daar gebeurt het ook .....

[Reveal!]

Digihelp ® schreef op woensdag 26 april 2006 @ 18:27:
Probeer eens

Cascading Stylesheet:

overflow: hidden;

aan je container mee te geven. In combinatie met width zorgt dit ervoor dat de float elementen ook worden meegerekend.

Overigens is die margin-right op je content waarschijnlijk niet de bedoeling. Tevens is het soms handiger om juist de content een float: left mee te geven ipv de rechterkolom een float: right.

Dit werkt inzoverre dat de container wel mee groeit maar de footer blijft opdezelfde plaats... dus nog steeds tekst over de footer ....

[Digihelp ®]

JHS schreef op woensdag 26 april 2006 @ 19:00:
Digihelp: Het ging om groeien in de lengte, en niet in de breedte volgens mij : "De container groeit dus niet mee naar beneden, de tekst gaat gewoon over de footer heen, uit de container." Zie overigens ook deze testcase, misschien dat dat het wat duidelijker maakt .

Het gaat bij mij ook om de hoogte, anders zeg ik het echt niet zo stellig. Ik heb dit trucje ooit hier geleerd: http://www.quirksmode.org/css/clearing.html. Overflow: hidden wordt gebruikt ipv overflow: auto om problemen met IE Mac te voorkomen.

De test pagina die ik even snel heb gemaakt werkt bij mij in ieder geval goed met deze methode:

HTML:

<!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>
  <title>test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <style type="text/css">
    div.container
    {
        background-color:#FFFFFF;
        width:760px;
        margin:20px auto 0px auto;
        border:1px solid gray;
        text-align:left;
        line-height:150%;
        position:relative;
        overflow:hidden;
    }
    div.header,div.footer
    {
        padding: 0.5em;
        color:white;
        background-color:gray;
        clear:left;
    }
    h1.header
    {
        padding:0;
        margin:0;
    }
    div.content
    {
        border-right:1px solid gray;
        padding: 1em;
        float: left;
        width: 450px;
    }
    div.right
    {
        width:160px;
        float: left;
        padding:1em;
    }
</style>  
</head>
<body>

<div class="container">
    <div class="header">
        <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
    </div>
    <div class="content">
    {CONTENT}Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="right">
    {RIGHT}Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    </div>
    <div class="footer">
    {FOOTER}Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>
</body>
</html>

De verschillen in CSS zijn minimaal, zoals eerder gepost: overflow: hidden op container toegevoegd, content en right float:left; toegevoegd, margin-right weggehaald en width toegevoegd bij content.

Online Voorbeeldje staat hier: http://joostsmulders.nl/overflow.html

TS: als je html opzet anders is dan moet je dat maar even posten, wellicht dat ik er morgen nog even na kan kijken.

[ Voor 14% gewijzigd door Digihelp ® op 27-04-2006 13:14 ]

[Reveal!]

Digihelp ® schreef op donderdag 27 april 2006 @ 01:50:
[...]


Het gaat bij mij ook om de hoogte, anders zeg ik het echt niet zo stellig. Ik heb dit trucje ooit hier geleerd: http://www.quirksmode.org/css/clearing.html. Overflow: hidden wordt gebruikt ipv overflow: auto om problemen met IE Mac te voorkomen.

De test pagina die ik even snel heb gemaakt werkt bij mij in ieder geval goed met deze methode:

De verschillen in CSS zijn minimaal, zoals eerder gepost: overflow: hidden op container toegevoegd, content en right float:left; toegevoegd, margin-right weggehaald en width toegevoegd bij content.

Online Voorbeeldje staat hier: http://joostsmulders.nl/overflow.html

TS: als je html opzet anders is dan moet je dat maar even posten, wellicht dat ik er morgen nog even na kan kijken.

Begrijp et het niet maar het werkt
Thanks

[Digihelp ®]

Reveal! schreef op donderdag 27 april 2006 @ 10:00:
[...]


Begrijp et het niet maar het werkt
Thanks

Wat begrijp je niet ?

De belangrijkste reden waarom de code in jouw TS niet werkte is dat er naast de content div geen ruimte was voor de right div. Die right div schuift dus naar beneden. Aangezien je op je footer alleen een clear:left hebt en geen clear: both komt de right div netjes naast de footer te staan. Dat zou je dus al kunnen oplossen door clear: both op je footer te zetten.

Vervolgens heb je nog het probleem dat de div right niet naast de content komt. Er zijn hier twee mogelijkheden om het op te lossen.

Mogelijkheid 1 is om de content div een width te geven waardoor er voldoende ruimte overblijft, bijvoorbeeld 450px. Je moet dan wel een float: left van de content div en de right div maken, zodat ze netjes naast elkaar komen. De margin-right op je content div moet dan weg, want anders komt die ruimte ertussen en past het weer niet. Dit is de manier die ik hiervoor heb gepost. Het verhaal over overflow: hidden kan je voor nu vergeten, omdat je al een clearing div heb in de vorm van je footer. Overflow:hidden is dus niet nodig.

Dan mogelijkheid 2: voor een liquid content div. Wederom zowel content als right div float: left; Nu is geen width nodig op de linker kolom en wel een margin-right. Wat wel belangrijk is om dan een negatieve margin-width mee te geven aan de right div, zodat hij over deze lege ruimte heen kruipt.
In mijn voorbeeld heb ik de negatieve margin 1 px groter gemaakt, zodat ik er nog een border-left in kan zetten zonder dat de border twee keer zo dik wordt. Dit is handig als de right div een langere content heeft dan de content div, omdat je anders geen border meer hebt.

Cascading Stylesheet:

   div.content
    {
        float: left;
        margin-right: 200px;
        padding: 1em;
        border-right:1px solid gray;
    }
    div.right
    {
        float: left;
        width:160px;
        margin-left: -201px;
        border-left: 1px solid gray;
        padding:1em;
    }

Zie hier voor een online voorbeeld. Hoop dat het zo duidelijk is.