div probleem

Je omschrijving is niet echt duidelijk, maar ik gok dat je het principe van faux columns nodig hebt.

ja dat is mijn probleem maar wat is de oplossing? Die kan ik niet vinden.

Zie een van de vele links in die zoekresultaten zou ik zeggen. In de eerste wordt al een prima uitleg gegeven...

Het probleem word alleen maar erger doordat ik een plaatje als achtergrond toevoeg.

Dan pas je de oplossing waarschijnlijk niet goed toe, want zoals je in die voorbeelden kunt zien werkt het wel degelijk.

Maar goed, zonder een stukje relevante code is het erg lastig om je te helpen...

Ik heb nu dit:

.twoColElsLtHdr #sidebar1 {
	float: left; 
	width: 12em; 
	background: #666666 url(sidebar.gif)  repeat-x 100% 0;
	padding: 0px 0; 
}

Maar er komt helemaal geen afbeelding. De sidebar is denk ik niet heel belangrijk want dat is gewoon een div box.

Om een div automatisch langer te maken kun je deze css gebruiken:

#divnaam{
	background:url(sidebar.gif) repeat-x #666;
	min-height:600px;
	height:auto !important;
	height:600px;
	width:120px;
	margin:0px;
	padding:0px;
}

Maar er komt helemaal geen afbeelding. De sidebar is denk ik niet heel belangrijk want dat is gewoon een div box.

Kijk nu eens goed naar de voorbeelden in die zoekresultaten. Het principe van faux columns berust op een combinatie van een achtergrondafbeelding en de juiste HTML met bijbehorende CSS code.

Je krijgt dus een container-div met daarin je sidebar-div en je content-div. De achtergrondafbeelding is onderdeel van je container en niet van je sidebar of content div. De sidebar en content vallen over die achtergrondafbeelding in je container heen waardoor het lijkt alsof de sidebar-div meerekt. Maar in werkelijkheid doet hij dat helemaal niet, dat is enkel je achtergrondafbeelding die wel uitrekt omdat je container uitrekt...

<div id="main">
  <div id="left">
    sidebar
  </div>
  <div id="right">
    de rest van je site ofzo
  </div>
</div>

CSS:

#main {
  background: url(path/to/bg.jpg);
  overflow: hidden;
}

#main #left {
  width: 120px;
  float: left;
}

#main #right {
  width: 680px;
  float: left;
}

Als het in deze opbouw staat, moet het werken ;-).

dank iedereen probleem opgelost