Forum PHP.pl > [CSS] Div na 100% w drugim div

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS] Div na 100% w drugim div

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

Earth

29.11.2008, 13:13:57

Mam problem z rozszerzeniem diva na 100%.

[HTML] pobierz, plaintext 
<div id="body">
  <div class="row">
    <div class="cell">
      <div id="left4">1 Lewa</div>
      <div id="left5">2 Lewa</div>
    </div>
    <div id="center" class="cell">Środek</div>
    <div id="right" class="cell">Prawa kolmna</div>
  </div>
 </div>
[HTML] pobierz, plaintext

[XML] pobierz, plaintext 
div#bg div#body {
    position : relative;
    display: table;
  }
 
 
.row {
    display:table-row;
  }
 
 
.cell {
    display : table-cell;
  }
 
 
div#body div#left4 {
    height : 56px;
    position: relative;
    clear:right;
    float:right;
  }
 
 
div#body div#left5 {
    height : 100%;
    position: relative;
    float:right;
    clear:right;
  }
[XML] pobierz, plaintext

http://img341.imageshack.us/img341/5666/zr...kranuds0.th.png

erix

29.11.2008, 13:16:09

http://perfectionorvanity.com/2007/03/07/r...ny-layoutu-css/

Earth

29.11.2008, 13:56:06

Ten link nie pomaga mi za dużo

Jest w nim jak wyrównać 3 równorzędne div, które mam już równe. A mi chodzi jak rozszerzyć div podrzędne do innego div tak jak jest na rys:
http://img341.imageshack.us/img341/5666/zrzutekranuds0.png

zegarek84

29.11.2008, 16:12:22

normalnie tutaj nie zaglądam i nie wiem czemu zajrzałem... jakoś nie chciało mi sie analizować Twojej koncepcji za co przepraszam i ustawiłem prawie wszystko na sztywno - ale jest miejsce na skalowanie - jakoś mam sentyment do absolute tym bardziej że przez odpowiednią kombinację uzyska się efekt fix czy fixed (jakby tam sie zwał) działający bez skryptów w IE....

skopiuj i zerknij czy może być - podorzucaj po swojemu style i nadaj po swojemu szerokości - ale wtedy na środkowym musisz dać lewa i prawą taka jak szerokości zewnętrznych - środkowa będzie się skalowała w szerokości i wysokości, pozostałe w wysokości:

[HTML] pobierz, plaintext 
<html>
<head>
<style>
div {position: absolute;}
#left4, #left5 {left: 0px; width: 200px;}
#left4 {top: 0;
   height : 56px;
background-color: yellow;
 }
#left5 {top: 56px; bottom: 0;
   background-color: red;
  }
#center { top: 0 ; bottom: 0;
right: 300px; left: 200px;background-color: green;
}
#right{ top: 0 ; bottom: 0;
right: 0; width: 300px; background-color: grey;}
</style>
</head><body>
<div id="left4">1 Lewa</div>
<div id="left5">2 Lewa jk k jo lj o; jo j ol jo ljk o lj ol joi hj ol jo lj o j okl jo lhj ol jo h il hk g ukg uk g</div>
<div id="center">Ĺšrodek</div>
<div id="right">Prawa kolmna</div>
</body></html>
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.