Hogyan lehet/szokás html-ben hasábok szélességét (div-ek) %-osan megadni, de a köztük lévő rést abszulút?

css szabályokkal ez könnyen megy.

pl:

<div id="container">

<div id="side">oldal</div>

<div id="content">tartalom</div>

</div>

css:

#container {

}

css szabályokkal ez könnyen megy.

pl:

<div id="container">

<div id="side">oldal</div>

<div id="content">tartalom</div>

</div>

css:

#container {width: 100%}

#side{width: 25%; margin: 0 5px 0 0;float: left;}

#content{width: 75%; margin: 0 0 0 5px;float: left;}

Nagyjából így. A padding a belső margó, a margin a külső. A fenti példában úgy adtam meg, hogy a side divnek a jobb , a content divnek a bal oldalán legyen 5 pixeles táv, így 10 pixel fix távolságot tartanak egymástól. A float érték ráveszi őket, hogy a bal oldalra soroljanak, ne egymás alatt jelenjenek meg.

Persze ez elég kezdetleges megoldás, de a lényeget elmondja.

Kisérletezz! Sok sikert!

@Drone: kivéve hogy ez nem jó, mert egymás alá fognak csúszni

de ez nyilvánvaló, mert nem elég nekik a hely, 100%+10 pixel

ez asszem valami hatodikos anyag..

@kérdező

egyébként ahelyett, hogy leszólod a válaszolókat, gondolkozhatnál is egy picit:

pl:

bal menü szélesség: 30%

jobb hasáb szélesség: 60%

te meg szeretnéd adni a 10%-ot pixelben

de a százalékos megoldás pont arra való, hogy különböző felbontásokon is működjön, ha nem tudod abszolút megadni

egy megoldás:

-----------------------------------------------------------

| 30% | 10% | 60% |

| | | |

| | | |

| | | |

| | | |

| | | |

| | | |

| | | |

| | | |

| | | |

| | | |

-----------------------------------------------------------

mondom egyszerűbben:

ugyanaz, mint amit Drone leírt, csak pixel helyett szépen százalékolsz

* {margin: 0;}

#container {width: 100%}

#side{width: 30%; margin-right: 10%; float: left}

#content{width: 60%; float: left}

width helyett használj max-width beállítást:

[link]

figyelj már

én nem tudom miért nem lehet megérteni

az abszolút és a százalékos megoldást együtt használva jönnek ki az ilyen elcsúszások

komplett kód:

[link]

ez működik a legújabb IE-ben, most próbáltam ki

a másik, amit még megtehetsz, az az, hogy nem a margint adod meg százalékosan, hanem beraksz egy középső div-et, ami széttolja a bal és a jobb hasábot