Archief - xHTML/CSS: alternatieve equal height columns

Bram · 23 mei 2006

Oke, ik heb een layout: http://users.pandora.be/Sveltestsword/europeanresellers/

maar als je kijkt naar de onderste twee kolommen (met de lipsum tekst) zal je zien dat deze geen zelfde hoogte hebben... ze verschillen nu juist toevallig weinig doordat de tekst zo gepositioneerd is...

Ik wou ze op gelijke hoogte brengen, maar als ik de equal height wou toepassen, versprong er vanalles in FF, deed em in opera niets (behalve heel lang worden (hack nog nie toegepast) en verdween de onderste border in IE...

Ik concludeer hieruit dat het spelletje niet opgaat met borders...

Iemand die een alternatief in gedachten heeft?

EDIT: kheb ondertussen ook geprobeerd om een beetje te sjoemelen: de onderste rand weggedaan en vervangen door een div van 3px hoog en dan equal height column geprobeerd, ma thoudt geen steek, de hele content box verdwijnt rechts in FF, in IE verdwijnt em gewoon en wordt de pagina heel lang... Kgeraak er nie aan uit

Quilombo · 23 mei 2006

nogal logisch dat dat met bottomborders niet werkt, als je da nie snapt denk ik da je t principe dervan nie begrijpt

SvelstestSword zei:
...versprong er vanalles in FF, deed em in opera niets (behalve heel lang worden (hack nog nie toegepast)

wrs teken dat er iets met de rest van uw code schort, 'k heb er nog nooit problemen meegehad, ma 'k gebruik da niemeer omda ge te hard moet gaan knoeien om het in oudere browsers ook deftig te krijgen

'k zou toch nog alles eens goed lezen (ook de footnotes) en dit hier: http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems

Bram · 23 mei 2006

Quilombo zei:
nogal logisch dat dat met bottomborders niet werkt, als je da nie snapt denk ik da je t principe dervan nie begrijpt

wrs teken dat er iets met de rest van uw code schort, 'k heb er nog nooit problemen meegehad, ma 'k gebruik da niemeer omda ge te hard moet gaan knoeien om het in oudere browsers ook deftig te krijgen

'k zou toch nog alles eens goed lezen (ook de footnotes) en dit hier: http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems

als ge het niemer gebruikt, wa doet ge dan wel alsek vragen mag? of vermijdt ge gewoon kolommen waarda ge het zout op nodig hebben?

Ik krijg de laatste tijd vaker het gevoel dat er iets schort mee m'n code, ma ik kan gelijk maar nie vinde wa...

Quilombo · 23 mei 2006

'k vermijd het ja
kunt ook faux-columns gebruiken he, ma da vin k ook omslachtig, agge iet wilt aanpasse moete ook die afbeelding aanpasse (google it als ge t nie kent)

en 'k denk ook wel vaker dat er iets schort met jouw code :sop:

orez · 23 mei 2006

faux-columns moede dan ook deftig gebruiken hé ...
bg-img aanpassing? :wtf:

Ik denk dat er dan iets short met uw faux-columns gebruik ze

Bram · 23 mei 2006

orez zei:
faux-columns moede dan ook deftig gebruiken hé ...
bg-img aanpassing?

Ik denk dat er dan iets short met uw faux-columns gebruik ze

kdenk da em bedoelt da als ge de width van u blokken wilt aanpassen, ge ook u image moet aanpassen.

enfin
oke, hier is het maffe.
ik wou faux columns gebruiken, dus ik pak een screen van m'n columns zoals ze nu zijn, pas ze wa aan en zorg er dus voor dak m'n blauwe randjes heb. enfin, dak dus m'n bg image heb... (ff snel wa code schrijven om het duidelijk te maken)

HTML:

<div id="content">
<div id="main">blabla</div>
<div id="side">bla bla</div>
</div>
<div id="clear"></div>

en dan in m'n css (beetje afgekort weliswaar, enkel het noodzakelijke getypt)

Code:

#content {
background: url(image/content_bg.gif) repeat-y;
}
#side { float: left}
#main {float: left en width en al die dingen}
#clear {
width: 700px;
height: 3px;
background: #e3ef0a;
clear: both;
margin: 0px auto;}

en kkrijg geen gestretchte achtergrond...
tenzij dak faux columns nog nie gans vat... kzou beter mss nen keer wa meer artikels leze...
tis frustrerend om heel den tijd tgevoel te hebben da er iets grondig mis is mee u coding

hmm, khem gelijk een totaal verkeerd gedacht van faux columns...

Skratz · 24 mei 2006

display: table
display: table-cell
enz

ge gebruikt geen tabellen maar ge moet wel een tabelstructuur namaken met divs, als ge alleen maar table-cell gebruikt werkt het niet in ie

het enige voordeel dat ge hiermee hebt tegenover tables te gebruiken is dat ge duidelijk aangeeft in uw code dat het niet om tabel met tabulaire data gaat.

Bram · 24 mei 2006

Skratz zei:
display: table
display: table-cell
enz

ge gebruikt geen tabellen maar ge moet wel een tabelstructuur namaken met divs, als ge alleen maar table-cell gebruikt werkt het niet in ie

het enige voordeel dat ge hiermee hebt tegenover tables te gebruiken is dat ge duidelijk aangeeft in uw code dat het niet om tabel met tabulaire data gaat.

dus content een display: table geven en main en side een display: table-cell???

even proberen

edit: nope marche pas...

zabulus · 24 mei 2006

ik los da altijd op met javascript
offsetHeight
kijken welke de grootste is, dan de kleinere laten aanpassen aan de grote...
werkt alleen niet in opera

Rvl · 24 mei 2006

of je kan ook gewoon een wrapper rondom u 2 div's plaatsen en die de border meegeven.

Skratz · 24 mei 2006

werkt wel. er mist wel nog een extra div voor table-row

#content {
margin: 0px auto;
height: auto;
width: 700px;
background: url(images/content_bg.gif) repeat-y;
display: table;
}
#side { width: 229px;
border: solid #e3eaf0;
border-width: 3px 3px 3px 3px;
margin: 15px 0px 0px 0px;
display:table-cell;
}
#main { width: 461px;
border: solid #e3eaf0;
border-width: 3px 0px 3px 3px;
margin: 15px 0px 0px 0px;
display: table-cell;
}
/* services */
#services {
width: 700px;
height: auto;
margin: 15px auto;
}
#services:after { content: ""; display: block; height: 0; clear: both;}

Bram · 24 mei 2006

Rvl zei:
of je kan ook gewoon een wrapper rondom u 2 div's plaatsen en die de border meegeven.

geprobeerd, ma door die float left marcheert da gelijk nie al te goed... alla, da was toch het geval bij de services boxkes...
En trouwens, dan gaak nog mee een gat in m'n middelste border zitten... Tenzij dak mee zekerheid kan zeggen da één kolom altijd langer zal zijn... Soit... Kzal mij nog eens amuseren

Oke, na nog een rondje Google eindelijk de oplossing gevonden... Het spel marcheert nu ook meteen.. Hiep Hoi
Oplossing gevonden op http://www.paulbellows.com/getsmart/balance_columns/

Oplossing die ook Zabulus vermelde, en werkt blijkbaar ook in de laatste Opera... Ik zen content (kan iemand checken met Safari? of oudere browsers?)

Rvl · 24 mei 2006

wa heeft float hiermee te maken? als je float begint te combineren met position:absolute ofzo dan vraag je gewoon om problemen, als je float op de juiste manier gebruikt kan je hier geen problemen mee krijgen. Verder is u gat in het midden op te vullen door een background image met een repeat-y. zo krijg je dan ook u middelste border (eigenlijk een simpele faux collumn toepassing enkel voor border dan). Hier heb je niet echt javascript nodig.

Bram · 25 mei 2006

Rvl zei:
wa heeft float hiermee te maken? als je float begint te combineren met position:absolute ofzo dan vraag je gewoon om problemen, als je float op de juiste manier gebruikt kan je hier geen problemen mee krijgen. Verder is u gat in het midden op te vullen door een background image met een repeat-y. zo krijg je dan ook u middelste border (eigenlijk een simpele faux collumn toepassing enkel voor border dan). Hier heb je niet echt javascript nodig.

i know i know... maar er moet echter ergens iets fout gegaan zijn, want da hebbek ettelijke keren geprobeerd, het werkt niet... java was een beetje een last resort, maar het werkt en ik ben happy

Rvl · 25 mei 2006

js bedoel je en niet java

en als je het goed toepast kan hier geen probleem ontstaan aangezien dat toch wel redelijk simpel is hoor, normaal moet je dat wel kunnen.

Code:

<div id="wrapper">
 <div id="links">tekst</div>
 <div id="rechts">tekst</div>
</div>

u child div's van wrapper geeft ge float mee. u wrapper div daar geeft ge de positioning aan mee en geeft ge border:1px solid #fff en background: #fff repeat-y; mee en dan zal da normaal wel werke

Quilombo · 26 mei 2006

Skratz zei:
werkt wel. er mist wel nog een extra div voor table-row

#content {
margin: 0px auto;
height: auto;
width: 700px;
background: url(images/content_bg.gif) repeat-y;
display: table;
}
#side { width: 229px;
border: solid #e3eaf0;
border-width: 3px 3px 3px 3px;
margin: 15px 0px 0px 0px;
display:table-cell;
}
#main { width: 461px;
border: solid #e3eaf0;
border-width: 3px 0px 3px 3px;
margin: 15px 0px 0px 0px;
display: table-cell;
}
/* services */
#services {
width: 700px;
height: auto;
margin: 15px auto;
}
#services:after { content: ""; display: block; height: 0; clear: both;}

dit mag wel in de sticky imo

Skratz · 27 mei 2006

meh, ik heb het nog eens bekeken en het werkt blijkbaar (bij mij) toch niet in ie. hoewel ie het normaal toch zou ondersteunen. bij firefox en opera is er alleen maar table-cell nodig.

Archief - xHTML/CSS: alternatieve equal height columns

Bram

Legacy Member

Quilombo

Legacy Member

Bram

Legacy Member

Quilombo

Legacy Member

orez

Legacy Member

Bram

Legacy Member

Skratz

Legacy Member

Bram

Legacy Member

zabulus

Legacy Member

Rvl

Legacy Member

Skratz

Legacy Member

Bram

Legacy Member

Rvl

Legacy Member

Bram

Legacy Member

Rvl

Legacy Member

Quilombo

Legacy Member

Skratz

Legacy Member