[css] Pionowe rozciąganie div'ów

1

Witam.
Strona, którą buduję posiada 5 div'ów. Chciałbym, aby wyglądała ona w następujący sposób: u góry baner, w środkowej części po lewej menu, po jego prawej stronie zawartość, a pod wszystkim stopka. Dodatkowo chciałbym, aby pomiędzy menu, a zawartością była kreska rozciągająca się od banera, aż po stopkę. Problem jest taki, że czasami div 'menu' jest wyższy niż 'content', a czasami jest na odwrót. Nie potrafię jednak "rozciągnąć" div'ów ('menu' lub 'content'), tak aby miały one tą samą wysokość, co pozwoliłoby mi narysowanie linii.

HTML:

<body>
  <div id="main">
    <div id="baner">Tutaj baner</div>
    <div id="nav">Tutaj menu</div>
    <div id="content">Tutaj zawartość</div>
    <div id="footer">Tutaj stopka</div>
  </div>
</body>

CSS:

div#main {
	background-color: #FFFFFF;
	border: 1px solid black;
	width: 780px;
	margin-left: 20px;
}

div#baner {
	height: 100px;
	border-bottom: 1px solid #D6D6D6;
	margin: 0;
	clear: both;
}

div#nav {
	float: left;
	border-right: 1px solid #D6D6D6;
	padding-left: 0px;
	text-align: left;
	margin: 0px;
	width: 120px;
}

div#content {
/*        border: 1px solid green; */
	float: right;
	width: 640px;
	margin-right: 5px;
	text-align: justify;
}

div#footer {
	clear: both;
	border-top: 1px solid #D6D6D6;
	margin: 0px;
}
0

Sama linia - po prostu jednostronny border. Co do rozciągania div'ów - jest wzkazówka co do tego na spinaczu, zaraz poszukam... Mam: http://www.spinacz.pl/g/www/th/2854.

0

Ja tam jestem zdania ze w takich sytuacjach w ktorych chodzi jedynie o zabieg kosmetyczny, mozna wykorzystac JavaScript:

  
function heightAlign() {
  var elm = [], val = [], i, tmp;
  for (i = 0; i < arguments.length; i++) {
    if (tmp = document.getElementById(arguments[i])) {
      elm[elm.length] = tmp;
      val[val.length] = tmp.offsetHeight;
    }
  }
  if (elm.length < 2) return;
  tmp = eval('Math.max(' + val.join(',') + ')');
  for (i = 0; i < elm.length; i++) {
    elm[i].style.height = tmp + 'px';
  }    
}
onload = function() {
  heightAlign('nav', 'content');
}

jesli wstawisz to gdziekolwiek na stronie to klopot zniknie ;)

0 
div#nav {
        float: left;
        border-right: 1px solid #D6D6D6;
        padding-left: 0px;
        text-align: left;
	padding:0;
        margin: 0px;
	margin-right:-4px;
        width: 120px;
}

div#content {
        border-left: 1px solid #D6D6D6; 
        width: 640px;
	margin-left:120px;//margin-left:0;
	padding-left: 20px;
        margin-right: 5px;
        text-align: justify;
}
0

A ja to chce troche bardziej rozbudowac:

<body>
  <div id="main">
    <div id="baner">Tutaj baner</div>
    <div id="nav">Tutaj menu</div>
    <div id="content">
      Tutaj zawartość
      <div style="border: 1px solid #FF0000;">cos</div>
    </div>
    <div id="footer">Tutaj stopka</div>
  </div>
</body>

Nie wazne ze div z czerwona ramka nie zapelnia calego dolu, chodzi o idee.
Czyli, jak menu jest krotkie to "cos" jest zaraz pod "zawartoscia", a jak menu jest dlugie, to "cos" wedruje na sam dol, tak ze "cos" jest zawsze mozliwie jak najnizej (zaraz przy stopce)
Jak to zrobic??

BTW: ten przyklad ze spinacza ( http://piotrpotera.com/stuff/dla_dota.html ) nie dziala dobrze pod IE, jesli szara czesc jest wyzsza od prawej (przy duzej rozdzielce tak bedzie) to sie "toche" krzaczy....

1 użytkowników online, w tym zalogowanych: 0, gości: 1