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.
  1. #body{  
  2.   width:845px;  
  3.   min-height:500px;  
  4.   background:url(images/body.png) repeat-y;  
  5.   border:1px solid red;  
  6. }  
  7.   
  8. #body-left{  
  9.   float:left;  
  10.   width:177px;  
  11.   margin-left:22px;  
  12.   padding:10px;  
  13.   min-height:500px;  
  14. }  
  15.   
  16. #body-right{  
  17.   float:right;  
  18.   width:580px;  
  19.   margin-right:22px;  
  20.   padding:10px;  
  21.   min-height:500px;  
  22. }  
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:
  1. display: inline-block  
(Display)
vagy abszolut pozícionálással:
  1. 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:
  1. <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.