ugrás a tartalomhoz

Egyenlő oszlopmagasság színátmenetekkel

Joó Ádám · 2010. Dec. 5. (V), 21.01

Ameddig nem használhatjuk a rugalmas dobozokat, kerülőmegoldást kell találnunk, ha két változó tartalommal megtöltött oszlopot egyenlő magasságúnak szeretnénk tudni. A legelterjedtebb megoldás a függőlegesen ismétlésre bírt háttérkép, de Jeffrey Way tud ennél jobbat.

A CSS3 színátmeneteivel, ironikus bár, de csinálhatunk nemszínátmenetet is.

<div id="container">
	<div id="article"></div>
	<div id="aside"></div>
</div>
#container {
	background: -moz-linear-gradient(left, #FFC0CB 300px, #4169E1 300px);
	float: left;
}

#article {
	background-color: #FFC0CB;
	float: left;
	width: 300px;
}

#aside {
	background-color: #4169E1;
	margin-left: 300px;
	width: 200px;
}

Ezen megoldás szépsége abban rejlik, hogy nem kell képet szerkesztenünk, betöltenünk, a látvány módosításakor újraszerkesztenünk. Ráadásul kezes darab, hisz a színátmenetek hiányában is kulturáltan viselkedik.

 ■
1

Fluid Width Equal Height Columns

Poetro · 2010. Dec. 5. (V), 22.43
A CSS Tricks oldalon megjelent Fluid Width Equal Height Columns is tartalmaz pár egyéb trükkös megoldást kínál, és ezek egy része működik IE6 alatt is.
2

Float: suxx

Gixx · 2010. Dec. 7. (K), 15.19
nem kell ennyi float

#container{
    position: relative;
    background-color: #4169E1;
    /**
     * width és overflow:hidden jelenléte esetén a div magassága alkalmazkodik a
     * a belső float-os elem magasságához
     * szerkesztve: ... amennyiben az a magasabb
     */
    width:500px;
    overflow:hidden;
}

#article{
    float:left;
    width:280px;
    padding: 10px;
    background-color: #FFC0CB;
}

#aside{
    /** 
     * a border-color biztosítja, hogy balra akkor is legyen háttérszín,
     * amikor a szélső elem a "magasabb" 
     */
    border-left: 300px solid #FFC0CB;
    width: 180px;
    padding: 10px;
}