ugrás a tartalomhoz

Div elem nyúlás belső div hatására

vitaliyplay · 2011. Júl. 30. (Szo), 15.08
Adott 1 db div konténer, a #body, ezen belül még 2 db div van, a #body-left és #body-right. Probléma: ha sok szöveg van a #body-right-ban, megnyúlik (függőlegesen), viszont a #body nem, ezért a #body-right "kilóg" a #body-ból. 


#body{
  width:845px;
  min-height:500px;
  background:url(images/body.png) repeat-y;
  border:1px solid red;
}

#body-left{
  float:left;
  width:177px;
  margin-left:22px;
  padding:10px;
  min-height:500px;
}

#body-right{
  float:right;
  width:580px;
  margin-right:22px;
  padding:10px;
  min-height:500px;
}
A segítő jellegű hozzáaszólásokat előre is köszönöm.
‹ Tobbszoros <select> lista Javascript Galéria ›
 ■
1

Float

SecMan · 2011. Júl. 30. (Szo), 16.03
A float miatt...
Próbáld meg soron belüli doboz formátummal:
display: inline-block
(Display)
vagy abszolut pozícionálással:
position: absolute
(Position)

Legalábbis én így próbálnám.
(de persze vannak itt sokkkkkal hozzáértőbbek, akik remélem kiosztanak szokás szerint néhány nemkicsit hasznos tanácsot :))
Jó kis cikk az oldal táblázatnélküli CSS felépítésével kapcsolatban:
Weblabor - CSS lépésről-lépésre: táblázatnélküli oldalfelépítés
2

Ha nem tetszene, amit SecMan

H.Z. v2 · 2011. Júl. 30. (Szo), 16.11
Ha nem tetszene, amit SecMan írt, akkor nézd meg a CSS overflow attribútumát!
(ezzel lehet szabályozni, hogy az adott blokkból kilógó elemekkel mit csináljon: jelenítse meg, rejtse el, rejtse el, de tegyen ki egy scrollbart stb.)
3

Használj clearfixet:

LeGaS · 2011. Júl. 30. (Szo), 16.45
Használj clearfixet: http://nicolasgallagher.com/micro-clearfix-hack/
4

Köszi mindenkinek! Úgy is

vitaliyplay · 2011. Júl. 30. (Szo), 19.14
Köszi mindenkinek!
Úgy is működik, ha a két belső div után ez van:

<div style='clear:both;'></div>
5

De a legegyszerűbb

Kevlar · 2011. Júl. 31. (V), 01.58
ha float-olod a befoglaló elemet is. És akkor nem kerül clearfix div feleslegesen a forráskódba.