[CSS] Float, hoogte probleem ondergelegen elementen

[r0bert]

__________________________

Huidige probleem zie 3e reply
__________________________

Ik probeer floating divs, netjes onder elkaar te zetten, maar dat lukt niet omdat de een over de ander heen valt..

Ik heb allemaal van deze elementen


&



En als ik die onder elkaar plaats, ziet het er ongeveer zo uit:

Merk op, dat de onderste elementen zich aansluiten bij het EERSTE element van de vorige rij, maar niet bij de langste! (de 2e dus), daardoor vallen beiden rijen voor een gedeelte over elkaar en wordt het onderste gedeelte van de 2e kolom (1e rij) niet zichtbaar!

Hoe het moet worden is dus zo:

Maar ik krijg het niet voor elkaar.. Heb ook al clear: left; enzo gedaan, maar hij vertikt het..

_{CSS donkerblauw:}

Cascading Stylesheet:

div.stlDonkerblauw
{
    position:           relative;
    float:              left;
    
    width:              771px;
    border:             black 1px solid;
    
    margin-left:        -1px;

    background-color:   #F0F8FF;
}

_{CSS lichtblauw:}

Cascading Stylesheet:

div.stlLichtblauw
{
    width:      153px;
    
    border-left:     lightslategray 1px solid;
    border-right:   lightslategray 1px solid;

    position:       relative;
    float:         left;
}

[ Voor 39% gewijzigd door r0bert op 10-12-2003 21:59 ]

[disjfa]

na 2 div`s iets met een clear:both; erin .... bv <br style=clear:both;" />

[ Voor 22% gewijzigd door disjfa op 10-12-2003 16:30 ]

[r0bert]

Dat werkt niet,zelfs 2 gewone BR's hebben geen invloed

Lijkt wel of het gewoon genegeerd wordt
[code=xhtml]
<br style="margin-top: 50px;" />
[/code]
haalt bijv ook nix uit _{dat heb ik nou opgelost gelukkig.. typo}

Maar nee, werkt dus nog steeds niet .. Het lijkt ook alsof ik een soort renderfout krijg nu:

code:

+----------+
| hier sta |
| at dan d |
| an tekst |
+----------+
  wat door 
  loopt..

Oftewel, het DIV element, sluit al voordat het einde van de tekst is bereikt.. terwijl ik geen height of iets opgegeven heb Misschien heeft dat te maken met position: absolute ?

//edit
Ben nog steeds benieuwd wat nou de oplossing was, maar heb het inmiddels allemaal omgebouwd naar een andere indeling die wel werkt..

[ Voor 138% gewijzigd door r0bert op 10-12-2003 18:17 ]

[r0bert]

Weet ook iemand hoe ik meerdere (floating) div's naast elkaar op dezelfde height krijg zonder scripting? Is wel veel via de search te vinden, maar niet de oplossing die ik zoek geloof ik..

• display: table/table-row/table-cell, kreeg ik niet voor elkaar, geen ondersteuning door IE geloof ik.
• JS-methode: Niet echt een optie omdat het over heel veel elementen gaat en dit dan nogal (te) sloom wordt.
• Achtergrond element 'faken' als 2e element kan ook niet, omdat de structuur behouden moet blijven (van elementen naast elkaar) en het om meerdere elementen op een rij gaat ..

vb:

HTML:

<div id="elContainer">
   <div id="elLayer1">content                    </div>
   <div id="elLayer2">content<br />content          </div>
   <div id="elLayer3">content<br />content<br />content</div>
</div>

Cascading Stylesheet:

elLayer1, elLayer2, elLayer3
{
     float:   left;
}

en dan moeten de 3 layers gelijke hoogte krijgen..

[ Voor 41% gewijzigd door r0bert op 10-12-2003 22:02 ]

[André]

r0bert schreef op 10 december 2003 @ 21:54:
Weet ook iemand hoe ik meerdere (floating) div's naast elkaar op dezelfde height krijg zonder scripting? Is wel veel via de search te vinden, maar niet de oplossing die ik zoek geloof ik..

HTML:

<div style="position:absolute;float:left">A1</div>
<div style="position:absolute;float:left">B1</div>
<div style="position:absolute;float:left">C1</div>
<br>
<div style="position:absolute;float:left">A2</div>
<div style="position:absolute;float:left">B2</div>
<div style="position:absolute;float:left">C2</div>

Zo toch?

[r0bert]

Het gaat erom dat de height hetzelfde wordt van de verschillende DIV's..

(en btw, om ze naast elkaar te krijgen, moet je position: absolute; weglaten)

zo moet het dus eigenlijk worden :):

maar dan meer dan 2 divs naast elkaar..

[ Voor 73% gewijzigd door r0bert op 10-12-2003 22:16 ]

[edwinistrator]

Ik heb het zelfde probleem en vroeg me af of dit niet mogelijk is, dat de floats netjes aansluiten ook verticaal?

[disjfa]

Cascading Stylesheet:

div#content{
    width:400px;
    background-color:blue;
}
div.licht{
    width:190px;
    float:left;
    margin:2px;
    background-color:yellow;
}

en

HTML:

<div id="content">

<div class="licht">
text......
</div>

<div class="licht">
text......
</div>

<br style="clear:both;" />

<div class="licht">
text......
</div>

<div class="licht">
text......
</div>

ik heb verder niet op kleur en positiejuistheid gelet maar dat weten jullie wel

dat 2e kan je ontkomen door in je css een _heigt (let op de _ en een min-height te zetten

de _height word dan gepakt door ie en de min height werkt dan hetzelfde als de height in ie

[ Voor 56% gewijzigd door disjfa op 11-12-2003 12:15 ]