ugrás a tartalomhoz

Egymásmellé rendezés float nélkül

KreeZonas · 2010. Nov. 17. (Sze), 10.46
Sziasztok! Egy olyan egyszerű dolgot szeretnék kivitelezni, hogy két div-et egymás mellé tegyek. A bal oldali fix szélességű, a jobb oldali viszont kitölti a rendelkezésére álló teret. Alapesetben a megoldás a float volna, viszont... A float-al az a baj, hogy a div-ek egymáson lesznek, bár a tartalmuk szépen a helyére kerül. Ez nekem speciel átlátszó háttér miatt nem lehet megoldás. A position állításával már javítható ez a probléma, viszont a 100% szélességet megnöveli az eltolás mértékével.

Tudna valaki segíteni ebben? Nagyon hálás lennék érte, mert úgy tűnik kifog rajtam.... Előre is köszönöm!
‹ scroll jquery-vel Regisztrációs oldal védelme ›
 ■
1

margin

Poetro · 2010. Nov. 17. (Sze), 12.03
Margó megadásával a változó szélességű dobozodat megfelelően el tudod tolni a másiktól. Csak akkora margót kell megadni, mint amekkora a fix szélességű doboz szélessége.
2

margin

KreeZonas · 2010. Nov. 17. (Sze), 12.22
De a margin tolja a dobozt, ami 100% szélesen épp úgy kilóg az oldalról, mintha absolute position-t használnék. Szóval a szélessége marad a teljes monitorszélesség...
3

példa

Poetro · 2010. Nov. 17. (Sze), 13.20
Csináltam egy megnézhető példát, hogy mire gondoltam.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body style="width: 500px; margin: 0 auto;">
  <div style="width: 80px; float: left; background: red; height: 100px;">
    Fix szélességű
  </div>
  <div style="margin: 0 0 0 80px; height: 100px; background: blue;">
    Változó szélességű
  </div>
  <hr>
  <div style="width: 80px; float: right; background: red; height: 100px;">
    Fix szélességű
  </div>
  <div style="margin: 0 80px 0 0; height: 100px; background: blue;">
    Változó szélességű
  </div>
</body>
</html>
4

Igen!

KreeZonas · 2010. Nov. 17. (Sze), 13.50
Köszönöm, így már értem, hogy mit rontottam el. Azért tolta így ki a margin a divet, mert a width-ét 100%-ra állítottam. Anélkül már tényleg jó. Köszönöm szépen!