[css] Floating divs gelijke hoogte geven

woensdag 22 oktober 2003 22:27

Topicstarter

Met door CSS gecontroleerde layers heb ik een site opgemaakt, maar nu loop ik tegen een probleem aan met twee verschillend gekleurde layers die even groot moeten worden. Deze twee layers moeten (absoluut gepositioneerd) naadloos naast elkaar staan, verschillende achtergrondkleuren (wit en oranje) hebben en even hoog worden. Het probleem is dat de rechter layer niet even groot wordt als de linker omdat de content in de linker layer variabel is. De site is te bekijken op http://www.reclameplaza.nl/edmm/.

Via google en de search op GoT heb ik aardig wat tips gevonden. Mijn oplossing was om dan maar de twee layers in een container naast elkaar te laten floaten en hun margin-bottom 0px te laten zijn. Dit werkt niet. Oplossing met het uitlezen van de hoogte van de linker layer d.m.v. JS werkt ook niet, omdat alleen Mozilla een correcte waarde teruggeeft en IE en Opera niet. Nu heb ik het 'opgelost' door de rechter layer op elke pagina een andere, vaste hoogte te geven zodat ie er in IE 6 goed uitziet, maar liever heb ik een oplossing in CSS die ook in andere browsers werkt. Elke oplossing is welkom, want ik zit vast

code:

<style type="text/css">
#container {
    position: absolute;
    left: 0px;
    top: 325px;
    z-index: 20;
    width: 775px;
    height: auto;
    overflow: visible;
    background: transparent;
    color: #FF9000;
    margin-bottom: 0px;
}

#container_left {
    float: left;
    z-index: 20;
    width: 575px;
    height: auto;
    margin-bottom:0px;
    background: #FFFFFF;
    color: #FF9000;
}

#container_right {
    float: right;
    z-index: 200;
    width: 200px;
    height: auto;
    margin-bottom:0px;
    background: #FF9000;
    color: #FF9000;
}

#contentdiv {
    position: relative;
    left: 175px;
    top: 10px;
    z-index: 20;
    width: 398px;
    max-width: 398px;
    text-align: justify;
    overflow: visible;
    background: transparent;
    color: #000000;
}
</style>

  <div id="container">
    <div id="container_left">
      <div id="contentdiv">
        <!-- Content  // -->
          Hier staat de in grootte varierende tekst
        <!-- End Of Content // -->
      </div>
      <!-- stelletje divs die er niet toe doen // -->
    </div>
    <div id="container_right" style="height:565px"></div>
  </div>

Mijn vraag is dus: Hoe kan ik cross-browser twee absoluut gepositioneerde layers naast elkaar dezelfde hoogte geven? (zonder gebruik van JS bij voorkeur)

Acties:

André

Analytics dude

Kun je de 2 layers die even hoog moeten zijn niet in een container gooien? Dan geef je die 2 layers een bottom:0px en top:0px. Dan hoef je alleen de container nog maar een height te geven.

woensdag 22 oktober 2003 22:35

Acties:

woensdag 22 oktober 2003 22:52

Topicstarter

André schreef op 22 October 2003 @ 22:27:
Kun je de 2 layers die even hoog moeten zijn niet in een container gooien? Dan geef je die 2 layers een bottom:0px en top:0px. Dan hoef je alleen de container nog maar een height te geven.

Het probleem is dat de container geen vaste hoogte heeft, omdat die mee moet groeien met de (variabele) content. Er is dus een container om de twee floating divs heen, de linker floating div heeft een variabele grootte en de rechter floating div moet zich hieraan aanpassen. Ze hebben wel allebei een margin-bottom van 0px.

[ Voor 0% gewijzigd door Ivar op 22-10-2003 22:36 . Reden: het hoeven overigens geen floating divs te blijven, zolang het maar gaat werken :) ]

Acties:

r0bert

Sorry dat ik het toch nog zeg terwijl je zelf al aangeeft dat het niet je voorkeur heeft, maar met JS is het makkelijk op te lossen. Ik heb net even zitten proberen met CSS, nu ben ik er ook niet zo'n wonder mee, maar ik kom er niet uit. Wat is de reden dat je hier geen JS wilt gebruiken ? Als de enige reden is 'slordig' en je hebt geen ander oplossing, dan zou ik er nog maar een keertje over nadenken

woensdag 22 oktober 2003 22:58

Acties:

woensdag 22 oktober 2003 22:59

Topicstarter

r0bert schreef op 22 October 2003 @ 22:52:
Sorry dat ik het toch nog zeg terwijl je zelf al aangeeft dat het niet je voorkeur heeft, maar met JS is het makkelijk op te lossen. Ik heb net even zitten proberen met CSS, nu ben ik er ook niet zo'n wonder mee, maar ik kom er niet uit. Wat is de reden dat je hier geen JS wilt gebruiken ? Als de enige reden is 'slordig' en je hebt geen ander oplossing, dan zou ik er nog maar een keertje over nadenken

Als jij me kunt vertellen hoe ik het in JS op kan lossen zodat het cross-browser werkt, wil ik dat best doen hoor

. Als het maar werkt! Wat ik tegen JavaScript heb? Redelijk veel, onder andere de - in mijn ogen - ranzige taal en het feit dat ik een hekel heb aan clientside oplossingen. Maar in dit geval is er misschien geen andere oplossing.

Overigens sta ik overal voor open; het hoeven bijv. geen floating divs te blijven, het mag in javascript (maar liever in HTML/CSS), zolang het maar gaat werken

...

Acties:

Justice

en hoe kan je nou een float in een container gooien? het hele idee van een float is namelijk dat ie buiten de structuur "float". float heeft geen parents. Of ben ik nou raar?

Human Bobby

woensdag 22 oktober 2003 23:10

Acties:

r0bert

Ik doe maar even de hele broncode:

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" xml:lang="en" lang="en">

<head>

<style type="text/css">
</style>

<script language="JavaScript" type="text/javascript">
function fnResizeContainer(strGetFromElement, strUseOnElement)
{
    objGetEl    = document.getElementById(strGetFromElement);
    objUseEl    = document.getElementById(strUseOnElement);
    
    objUseEl.style.height   = objGetEl.offsetHeight 
                  + objGetEl.style.paddingTop 
                  + objGetEl.style.paddingTop + 'px';
}
</script>

</head>

<body onload="fnResizeContainer('containerContent','containerRight');">

<div id="container" style="border: black 1px solid;">
    <div id="containerContent" style="float: left; width: 400px; 
                                                   border: red 1px solid;">
        0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />
        0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />
        0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />
        0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />
        0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />
        0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />
        0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />
        0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />
    </div>
    
    <div id="containerRight" style="border: green 1px solid;">
        ..
    </div>
</div>

</body>

</html>

edit:

Even online gezet op

deze pagina

[ Voor 126% gewijzigd door r0bert op 22-10-2003 23:14 ]

woensdag 22 oktober 2003 23:22

Acties:

woensdag 22 oktober 2003 23:30

Topicstarter

@r0bert: Jouw JS oplossing werkt prima onder IE6 en Opera 7.21, maar onder Mozilla 1.5 wil het nog niet helemaal. Zou je hier nog even naar willen kijken? Thanx! (Tot zover alvast hulde!

).

Hoewel r0bert's script m'n probleem oplost, ben ik toch nog wel benieuwd of het ook kan op een non-JS manier... Anyone?

Acties:

r0bert

^{Robert zit nu op andere computer en heeft geen mozilla tot zijn beschikking en moet nu van zijn oudertjes zijn bedje opzoeken Misschien heeft iemand anders even tijd, anders zul je zelf even moeten zoeken wat voor property Mozilla dan ondersteund..

Heb geen tijd meer om te lezen maar misschien heb je hier wat aan: offsetWidth}

woensdag 22 oktober 2003 23:34

Acties:

woensdag 22 oktober 2003 23:53

Topicstarter

r0bert schreef op 22 October 2003 @ 23:30:
^{Robert zit nu op andere computer en heeft geen mozilla tot zijn beschikking en moet nu van zijn oudertjes zijn bedje opzoeken Misschien heeft iemand anders even tijd, anders zul je zelf even moeten zoeken wat voor property Mozilla dan ondersteund..

Heb geen tijd meer om te lezen maar misschien heb je hier wat aan: offsetWidth}

Laat ik eens niet lui zijn en het zelf oplossen. Beetje JS moet te doen zijn

. Nog bedankt en slaap lekker!

Acties:

donderdag 23 oktober 2003 00:13

Topicstarter

Opgelost! Het probleem met het javascriptje in Mozilla was dat Mozilla achter de hoogte nog de tekst 'px' wil hebben. De relevante code is als volgt:

code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <script language="Javascript" type="text/javascript">
    function fnResizeContainer(strGetFromElement, strUseOnElement){
        objGetEl = document.getElementById(strGetFromElement);
        objUseEl = document.getElementById(strUseOnElement);
        objUseEl.style.height = objGetEl.offsetHeight + objGetEl.style.paddingTop + objGetEl.style.paddingTop+'px';
    }
  </script>
</head>
<body onload="fnResizeContainer('container_left','container_right');">
<div id="content">
  <div id="container">
    <div id="container_left">
      <div id="contentdiv">
        <!-- Content  // -->
        <!-- End Of Content // -->
      </div>
    </div>
    <div id="container_right"></div>
  </div>
</div>
</body>
</html>

Met als stylesheet:

code:

#container {
    position: absolute;
    left: 0px;
    top: 325px;
    z-index: 20;
    width: 775px;
    height: auto;
    overflow: visible;
    background: transparent;
    color: #FF9000;
    margin-bottom: 0px;
}

#container_left {
    float: left;
    z-index: 20;
    width: 575px;
    height: auto;
    margin-top:0px;
    margin-bottom:0px;
    background: #FFFFFF;
    color: #FF9000;
}

#container_right {
    float: right;
    z-index: 200;
    width: 200px;
    height: auto;
    margin-top:0px;
    margin-bottom:0px;
    background: #FF9000;
    color: #FF9000;
}

#contentdiv {
    position: relative;
    left: 175px;
    top: 10px;
    z-index: 20;
    width: 398px;
    max-width: 398px;
    text-align: justify;
    overflow: visible;
    background: transparent;
    color: #000000;
}

Nou ben ik wel nog steeds benieuwd naar een mogelijke HTML/CSS oplossing...

Acties:

donderdag 23 oktober 2003 00:14

Volgens mij is het mogelijk als je het met display:table-cell probeert. Je maakt er dan als het ware een tabel van maar dan in css

To study and not think is a waste. To think and not study is dangerous.

Acties:

donderdag 23 oktober 2003 00:19

der Gemutlichkeit

Dit doet volgens mij ook wat je wil?
(Al moet je nog wel ff naar de cross-browserness ervan kijken.)
Dan hoef je ook niet te gaan hannessen met js.

Acties:

Justice

Opera 7.21 zet kolom 2 er mooi onder iig

Human Bobby

donderdag 23 oktober 2003 00:22

Acties:

donderdag 23 oktober 2003 00:26

der Gemutlichkeit

Justice schreef op 23 October 2003 @ 00:19:
Opera 7.21 zet kolom 2 er mooi onder iig

Yup, en FireBird ook, maar daar is ook nog wel een mouw aan te passen volgens mij.
Point is, dat het grijpen naar js volgens mij niet nodig is.

[ Voor 35% gewijzigd door SillyJW op 23-10-2003 00:23 ]

Acties:

Justice

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>
<head>
    <title>Creatief met CSS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
    <meta name="description" content="Een fijn opmaakje met CSS" /> 
</head>
<body style="font-family: Verdana, Arial, sans-serif; font-size: 70%; line-height: 135%; color: #000;">
<div id="container" style="position:relative; width:400px; height: 300px; background: #F90; border: 4px solid #F00;">
    <div id="kolom1" style="position:relative; top: 0px; left: 0px; float: left; width:240px; height: 100%; background: #FFF; border: 2px solid #000;">
        <h1 style="font-size: 110%; color: #FFF; background: #000; padding: 5px;">DiV KOLOM.1</h1>
        <p style="padding: 5px;" contenteditable="true">
            Deze paragraaf is "content editable". Gooi hier maar eens een paar enters in en zie hoe bijde divs uitrekken. (IE)
        </p>
        <p style="padding: 5px;">   
            [img]"http://gathering.tweakers.net/global/smileys/smile.gif"[/img]
        </p>
    </div>
    <div id="kolom2" style="position:absolute; left:249px;">
        <h1 style="font-size: 110%; color: #000; padding: 5px;">DiV KOLOM.2</h1>
        <p style="padding: 5px;">
            <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.nwillem.nl/files/cssfun.html">
                [img]"http://jigsaw.w3.org/css-validator/images/vcss"[/img]
            </a>
        </p>            
    </div>
</div>
</body>
</html>

Faken werkt toch het best

[ Voor 21% gewijzigd door Justice op 23-10-2003 00:27 ]

Human Bobby

donderdag 23 oktober 2003 00:35

Acties:

donderdag 23 oktober 2003 00:53

@justice: leuk maar Moz houdt zich toch echt aan die height: 300px en alle content die erna komt wordt niet getoond.

To study and not think is a waste. To think and not study is dangerous.

Acties:

donderdag 23 oktober 2003 01:12

Topicstarter

Deze code werkt goed onder IE en Opera, maar niet onder Mozilla:

code:

  <div id="container" style="position:relative; width:775px; background: #FF9000">
    <div id="kolom1" style="position:relative; top: 0px; left: 0px; float: left; width:575px; height: 100%; background: #FFF"> 
      <div id="contentdiv">
        <!-- Content  // -->
        <!-- End Of Content // -->
      </div>
    </div>
    <div id="kolom2" style="position:absolute; left:575px; width:200px">
    </div>
  </div>

Dit is dus zonder javascripting. Hoe gaat het ook werken onder Mozilla e.d.?

Acties:

drm

f0pc0dert

Die code werkt in geen van alle browsers omdat het enkel de illusie wekt dat de 2e kolom opgerekt wordt. Dat is namelijk helemaal niet het geval: de eerste div (#container) wordt opgerekt.

Volgens mij heeft mozilla gelijk in de manier waarop het gerenderd wordt, want een div met position:relative; of position:absolute; wordt "detached" van zijn parent element en kan daarom het parent element niet meer oprekken.

Dit is overigens typisch iets wat ik wel gewoon met tables op zou lossen, als de kolommen perse op moeten rekken t.o.v. elkaar.

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

donderdag 23 oktober 2003 01:26

Acties:

donderdag 23 oktober 2003 01:38

Zoals ik al zei lukt het ook met display:table etc.

Heb even zitten klooien:

Cascading Stylesheet:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<html>
<head>
<title>tabellen</title>
<style type="text/css">
.Tcontainer {
    display: table;
    position: relative;
    width: 500px;
    padding:0px;
    margin:0px;
    border:0px;
    background-color: #CCCCCC;
    }
.Trow {
    display: table-row;
    width: 500px;
    height: 100%;
    padding:0px;
    margin:0px;
    border:0px;
    background-color: #009900;
    }
.Tleftcell {
    display: table-cell;
    width: 250px;
    background-color: #DDDDDD;
    float:left;
    padding:0px;
    margin: auto;
    border:0px;
    height: 100%;
    }
.Trightcell {
    display: table-cell;
    width: 250px;
    background-color: #FF0000;
    padding:0px;
    margin: auto;
    border:0px;
    float:right;
    height: 100%;
    }
</style>
</head>
<body>
<div class="Tcontainer">
 <div class="Trow">
  <div class="Tleftcell">
   Links<br><br>
   Dit is een test van links<br>Dit is een test van links<br>
   Dit is een test van links<br>Dit is een test van links<br>
   LAATSTE LINKS</div>
  <div class="Trightcell">Rechts<br></div>
 </div>
</div>
<div class="Tcontainer">
 <div class="Trow">
  <div class="Tleftcell">
   Links<br><br>
   Dit is een test van links
  </div>
  <div class="Trightcell">
   Rechts<br>
   Rechts<br>
   Rechts<br>
   Rechts<br>
   Rechts<br>
   Rechts<br>
   Rechts<br>
   Rechts<br>
   Rechts<br>
   Rechts<br>
   Rechts<br>
   LAATSTE RECHTS
  </div>
 </div>
</div>
</body>
</html>

Maar ja, het is makkelijker om met normale tabellen te werken en je kan het dan zelfs zien in NN4.7

To study and not think is a waste. To think and not study is dangerous.

Acties:

Sendy

drm schreef op 23 October 2003 @ 01:12:
Die code werkt in geen van alle browsers omdat het enkel de illusie wekt dat de 2e kolom opgerekt wordt. Dat is namelijk helemaal niet het geval: de eerste div (#container) wordt opgerekt.

Volgens mij heeft mozilla gelijk in de manier waarop het gerenderd wordt, want een div met position:relative; of position:absolute; wordt "detached" van zijn parent element en kan daarom het parent element niet meer oprekken.

Dit is overigens typisch iets wat ik wel gewoon met tables op zou lossen, als de kolommen perse op moeten rekken t.o.v. elkaar.

Alleen absoluut gepositioneerde elementen worden uit normal flow gehaald. relatief gepositioneerde niet; deze hebben dus wel interactie met hun ouders.

Ik zou het ook zonder tabel en javascript willen oplossen maar het blijkt een lastige opgave te zijn.

donderdag 23 oktober 2003 09:20

Acties:

donderdag 23 oktober 2003 09:26

der Gemutlichkeit

drm schreef op 23 oktober 2003 @ 01:12:
Die code werkt in geen van alle browsers omdat het enkel de illusie wekt dat de 2e kolom opgerekt wordt. Dat is namelijk helemaal niet het geval: de eerste div (#container) wordt opgerekt. [...]

Het ligt dus maar net aan de situatie of dat zo erg is. De eigenschappen van de CSS hoeven toch geen exacte kopie te zijn van een table-situatie? Volgens mij wordt er ook meestal verkeerd begonnen.

Wat is er mis om een ontwerp/opzet te maken met in je achterhoofd de techniek die je in de praktijk moet gaan gebruiken? Zelfs als je het ontwerp niet in handen hebt, is het toch je taak, als degene met kennis over deze techniek, om hier een stukje advies in te geven. Om nou te zeggen dat je niet een opzetje kunt maken in CSS die als eindresultaat qua leesbaarheid en uitstraling hetzelfde doet als wat de topicstarter wil, vind ik onzin.

Zeker als je gaat zeggen dat je niet de illusie mag wekken dat kolom.2 echt uitrekt.... waarom zou dat niet mogen? Alsof een table-opmaak geen illusie is.

[ Voor 3% gewijzigd door SillyJW op 23-10-2003 09:39 ]

Acties:

Clay

cookie erbij?

2 kolommen die alleen maar "naast elkaar staan" kunnen qua dimensies niet gelijk getrokken worden zonder script, ze hebben (zonder in een table te staan) namelijk niets met elkaar te maken; de ene kent de andere niet en omgekeerd.

Wat je wel kan doen is alletwee de kolommen in een container stoppen die de hoogte krijgt van de hoogste, en die container een background (waarschijnlijk image) geven waar die grafische 2deling inzit. Als je de kolommen met floats naast elkaar zet rekt de container alleen niet mee (IE wel, maar dat is fout), daar is een 3e element in de container voor nodig zonder float, en met clear:

code:

------------------------------
' ------------  ------------ '
' 'float:left'  'float:left' '
' '          '  '          ' '
' '          '  '          ' '
' '          '  '          ' '
' '          '  '          ' '
' ------------  ------------ '
' -------------------------- '
' 'clear:left              ' '
' -------------------------- '
------------------------------

En anders, als het echt zo belangrijk is dat het even hoog is en blijkbaar wat met elkaar te maken heeft, zet het in een table, ze zijn niet not-done ofzo

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

donderdag 23 oktober 2003 09:57

Acties:

drm

f0pc0dert

SillyJW:
Het ligt dus maar net aan de situatie of dat zo erg is. De eigenschappen van de CSS hoeven toch geen exacte kopie te zijn van een table-situatie? Volgens mij wordt er ook meestal verkeerd begonnen.

Neuh, daar heb je wel gelijk in, maar dat kan ik niet voor de topicstarter bepalen

Wat is er mis om een ontwerp/opzet te maken met in je achterhoofd de techniek die je in de praktijk moet gaan gebruiken? Zelfs als je het ontwerp niet in handen hebt, is het toch je taak, als degene met kennis over deze techniek, om hier een stukje advies in te geven. Om nou te zeggen dat je niet een opzetje kunt maken in CSS die als eindresultaat qua leesbaarheid en uitstraling hetzelfde doet als wat de topicstarter wil, vind ik onzin.

Nou, ik wens je veel succes

Zeker als je gaat zeggen dat je niet de illusie mag wekken dat kolom.2 echt uitrekt.... waarom zou dat niet mogen? Alsof een table-opmaak geen illusie is.

Ik zeg niet dat het niet mag, ik zeg alleen dat de topicstarter zich er niet in moet vergissen. Je moet je er wel van bewust zijn wat voor work-around je eigenlijk gebruikt en welke voor en/of nadelen die heeft.

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

donderdag 23 oktober 2003 10:07

Acties:

donderdag 23 oktober 2003 11:16

der Gemutlichkeit

drm schreef op 23 oktober 2003 @ 09:57:[...]
Nou, ik wens je veel succes

Dank-oe-wel

Ik zeg niet dat het niet mag, ik zeg alleen dat de topicstarter zich er niet in moet vergissen. Je moet je er wel van bewust zijn wat voor work-around je eigenlijk gebruikt en welke voor en/of nadelen die heeft.

Helemaal met je eens dat wat voor een oplossing je ook kiest, je je keuze bewust en weloverwogen moet maken. Een keuze onderbouwd met 'not done' en 'omdat het zo hoort' vind ik zowiezo niet zo slim. Alleen vind ik de term work-around niet op z'n plaats. Wat is hier nu de work-around? Een oplossing met js of met tables vind ik in dit geval de work-around.

Acties:

IschaGast

Ik heb ff snel het topic doorgelezen en je wilt dat 2 kolommen evenlang zijn. Wat je kan doen volgens mij is dit:

Als je nou 1 div maakt en die een oranje achtergrond geeft en daarin weer een div zet met een witte achtergrond. De witte div zal zoals je zelf zegt degene worden die altijd langer wordt. Hierdoor zal dus automatisch beide divs evenlang worden.

Kijk maar eens op www.netdiver.net, is dat niet precies wat je bedoeld?

donderdag 23 oktober 2003 14:42

Acties:

donderdag 23 oktober 2003 14:45

Topicstarter

Clay schreef op 23 October 2003 @ 09:26:
2 kolommen die alleen maar "naast elkaar staan" kunnen qua dimensies niet gelijk getrokken worden zonder script, ze hebben (zonder in een table te staan) namelijk niets met elkaar te maken; de ene kent de andere niet en omgekeerd.

Wat je wel kan doen is alletwee de kolommen in een container stoppen die de hoogte krijgt van de hoogste, en die container een background (waarschijnlijk image) geven waar die grafische 2deling inzit. Als je de kolommen met floats naast elkaar zet rekt de container alleen niet mee (IE wel, maar dat is fout), daar is een 3e element in de container voor nodig zonder float, en met clear:
code:
1
2
3
4
5
6
7
8
9
10
11
12
------------------------------
' ------------  ------------ '
' 'float:left'  'float:left' '
' '          '  '          ' '
' '          '  '          ' '
' '          '  '          ' '
' '          '  '          ' '
' ------------  ------------ '
' -------------------------- '
' 'clear:left              ' '
' -------------------------- '
------------------------------

Hierover had ik ook wat dingen gevonden via google, maar het werkte toen niet echt bij mij. Maar nu heb ik het nogmaals (ietsje anders) geprobeerd en het lijkt te werken in Mozilla, IE en Opera $_/-\o_$ ! Zie hieronder de code:

code:

  <div id="container">
    <div id="container_left"> 
      <div id="contentdiv">
        <!-- Content // -->
        <!-- End of Content // -->
      </div>
    </div>
    <div id="container_right">
    </div>
    <div style="clear:left"></div>
  </div>

Met stylesheet:

code:

#container {
    position: absolute;
    left: 0px;
    top: 325px;
    z-index: 20;
    width: 775px;
    height: auto;
    overflow: visible;
    background-color: #FF9000;
    color: #FF9000;
    margin-bottom: 0px;
}

#container_left {
    float: left;
    z-index: 20;
    padding:0px;
    margin: auto;
    width: 575px;
    height: auto;
    margin-top:0px;
    margin-bottom:0px;
    background-color: #FFFFFF;
    color: #FF9000;
}

#container_right {
    float: left;
    z-index: 200;
    padding:0px;
    margin: auto;
    width: 200px;
    height: auto;
    margin-top:0px;
    margin-bottom:0px;
    background-color: #FF9000;
    color: #FF9000;
}

#contentdiv {
    position: relative;
    left: 175px;
    top: 10px;
    z-index: 20;
    width: 398px;
    max-width: 398px;
    text-align: justify;
    overflow: visible;
    background: transparent;
    color: #000000;
}

En anders, als het echt zo belangrijk is dat het even hoog is en blijkbaar wat met elkaar te maken heeft, zet het in een table, ze zijn niet not-done ofzo

Zegt degene die front geen tabellen voor opmaak! in z'n ondertitel heeft staan

. Maar ik ben zeker niet tegen tabellen, alleen heb ik liever een div oplossing, zoals nu het geval is

Acties:

donderdag 23 oktober 2003 14:47

Topicstarter

@slm: Hoewel Clay me de juiste oplossing al heeft gegeven, wil ik toch uit nieuwsgierigheid die van jou nog even proberen. Je oplossing werkt als ik het probeer in mijn geval niet echt, misschien doe ik iets fout. Hieronder mijn code:

code:

  <div class="Tcontainer">
    <div class="Trow">
      <div class="Tleftcell">
        <div id="contentdiv">
          <!-- Content // -->
          <!-- End Of Content // -->
        </div>
        </div>
      <div class="Trightcell">
      </div>
    </div>
  </div>

Met stylesheet:

code:

.Tcontainer {
    display: table;
    position: absolute;
    left: 0px;
    top: 325px;
    z-index: 20;
    width: 775px;
    padding:0px;
    margin:0px;
    border:0px;
    background-color: transparent
}

.Trow {
    display: table-row;
    position: relative;
    left: 0px;
    top: 0px;
    width: 100%;
    padding:0px;
    margin:0px;
    border:0px;
    background-color: transparent
}

.Tleftcell {
    display: table-cell;
    width: 575px;
    height: 100%;
    background-color: #FFFFFF;
    float:left;
    padding:0px;
    margin: auto;
    border:0px;
}

.Trightcell {
    display: table-cell;
    width: 200px;
    height: 100%;
    background-color: #FF9000;
    padding:0px;
    margin: auto;
    border:0px;
    float:right;
}

Acties:

donderdag 23 oktober 2003 15:01

Topicstarter

IschaGast schreef op 23 oktober 2003 @ 11:16:
Ik heb ff snel het topic doorgelezen en je wilt dat 2 kolommen evenlang zijn. Wat je kan doen volgens mij is dit:

Als je nou 1 div maakt en die een oranje achtergrond geeft en daarin weer een div zet met een witte achtergrond. De witte div zal zoals je zelf zegt degene worden die altijd langer wordt. Hierdoor zal dus automatisch beide divs evenlang worden.

Kijk maar eens op www.netdiver.net, is dat niet precies wat je bedoeld?

Dat is toch een twee kolommen struktuur die niet even groot zijn en dezelfde achtergrondkleur hebben? Mijn vraag was wat anders en is inmiddels al opgelost (zie hierboven).

edit1: Nu ik er nog eens naar je reactie kijk, heb je in de basis wel gelijk en is dat ook ongeveer de oplossing van Clay, maar moeten het twee floating layers naast elkaar worden en zonder de 3e layer met style="clear: left" werkt dat blijkbaar dus niet.

edit2: Ook even nagezocht waarom die clear:left style er nou in moet, en dit is wat ik van de w3.org specificatie krijg:

left
The top margin of the generated box is increased enough that the top border edge is below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.

De bottom edge van de twee float elementen wordt dus met elkaar gelijkgezet als ik het goed begrijp. Precies wat ik wilde

[ Voor 39% gewijzigd door Ivar op 23-10-2003 15:09 . Reden: nog even de reactie doorgelezen en wat opgezocht ]

Acties:

IschaGast

Ivar schreef op 23 oktober 2003 @ 14:47:
[...]

Dat is toch een twee kolommen struktuur die niet even groot zijn en dezelfde achtergrondkleur hebben? Mijn vraag was wat anders en is inmiddels al opgelost (zie hierboven).

Nee eigenlijk niet. Kijk maar op www.netdiver.net dan zie je daar dit staan:

New media scene? Events? en dan rechts die foto van die vrouw.
Dat deel bedoelde ik, dacht dat je dat bedoelde. Beide div's hebben niet evenveel content maar zijn wel evenlang. Dat komt omdat ze 1 div een achtergrondkleur (beige) hebben gegeven en in die div de linkerkant een witte achtergrond hebben gegeven. Waardoor het lijkt dat ze evenlang zijn.

Maar dit was schijnbaar niet wat je bedoelde. Heb het ff te snel gelezen denk ik. Beetje druk hier namelijk.

donderdag 23 oktober 2003 15:34

Acties:

donderdag 23 oktober 2003 15:43

Ivar schreef op 23 oktober 2003 @ 14:45:
@slm: Hoewel Clay me de juiste oplossing al heeft gegeven, wil ik toch uit nieuwsgierigheid die van jou nog even proberen. Je oplossing werkt als ik het probeer in mijn geval niet echt, misschien doe ik iets fout. Hieronder mijn code:
...

Clay heeft geen oplossing gegeven maar een (prima werkende) workaround. Het gebruik van tabellen hetzij normale, hetzij via divs/css is de oplossing (ook al vind je het niet helemaal netjes).

Tot zover het mierengene_k.

Jouw code werkt niet goed omdat je de "height: 100%;" bent vergeten in de Trow class. Als je dit er wel in zet, werkt het prima (IE, Moz, Opera etc).

To study and not think is a waste. To think and not study is dangerous.

Acties:

donderdag 23 oktober 2003 15:46

Topicstarter

slm schreef op 23 October 2003 @ 15:34:
[...]

Clay heeft geen oplossing gegeven maar een (prima werkende) workaround. Het gebruik van tabellen hetzij normale, hetzij via divs/css is de oplossing (ook al vind je het niet helemaal netjes).

Tot zover het mierengene_k.

Jouw code werkt niet goed omdat je de "height: 100%;" bent vergeten in de Trow class. Als je dit er wel in zet, werkt het prima (IE, Moz, Opera etc).

Je hebt helemaal gelijk, als je de height:100% in de Trow class zet, werkt het! Of Clay's manier een workaround is durf ik niet te zeggen, de CSS elementen float en clear zijn er toch min of meer voor bedoeld? Maar allebei de oplossingen vind ik zelf prima

Acties:

donderdag 23 oktober 2003 16:12

Topicstarter

Okay, samenvattend heb ik dus 3 alternatieven:

1. Div container met twee 'left floating divs' en een 'left clearing div'. Alles m.b.v. CSS dus, misschien wel wat meer een workaround dan een oplossing.
2. Tables gebruiken
3. JavaScript

Ik ga voor de eerste oplossing, nu ik de voor- en nadelen heb bekeken van alle opties. Layers die door CSS gecontroleerd worden vind ik toch prettiger dan tables (niet 'not-done', maar toch...

) en JavaScript (om een aantal redenen die ik eerder heb genoemd). Een kwestie van smaak dus

. Bedankt voor het helpen!

Acties:

Clay

cookie erbij?

MacIE5.2 lijkt een bug te hebben waar de clear constructie ervoor zorgt dat de floats niet meer naast elkaar komen, maar onder elkaar, dus:

code:

<div met clearleft>
    <div floatleft />
    <div floatleft />
</div>

<div met clearleft>
    <div floatleft />
    <div floatleft />
</div>

gaat daarop niet werken

ben er wat mee aan het rommelen, maar ik heb nog geen oplossing gevonden.

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

donderdag 23 oktober 2003 16:27

Acties: