[xhtml] Dwa divy i jedna wysokość

[kiperoman]

Mam taki kod:

<div id="all">
<div id="content">
	  <div id="content-left">
	  tutaj tekst...
	  </div>
	  <div id="content-right">
	  </div>
 </div>
 <div id="footer">
 stopka
 </div>
</div>

CSS:

body {background-color: #8F8F8F;}
#content {width: 770px;}
#content-left {width: 253px; background: url(gfx/lewo.jpg); float: left; text-align: left;}
#content-right {width: 517px; background: url(gfx/prawo.jpg); float: left; text-align: left;}
#footer {width: 770px; height: 38px; background: url(gfx/stopka.jpg); clear: both;}

Tło diva, w którym nie ma tekstu to kolor tła body. Ustawienie tła dla dla diva content:

#content {width: 770px; background: url(gfx/content.jpg);}

działa poprawnie tylko w IE a FF i Opera wyświetla stronę tak samo jak bez tego.

Co mozna zrobić, aby tło diva content-right było ustawione?

[Gość w3master]

musisz rozciagnac #content, nie widze wysrodkowania - wiec zadziala float:

#content {float:left;width:770px;background:url(gfx/content.jpg) 0 0 repeat-y;}

drugi sposob, to rozciagniecie #conent za pomoca pseudoklay :after:

/* position is everything */
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix {display:inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

oraz lekko zmodyfikowany html:

<div id="content" class="clearfix">