Bakgrundsfärg / bild i DIV

3 svar · 247 visningar · startad av Karlsson 10 jan. 2004

KarlssonMedlem sedan maj 2000252 inlägg

Frågan10 jan. 2004 22:48#1

Halloj!
Har en container-div med två divar inuti, båda float: left, före och efter divarna har jag div clear: both.
Hur fyller jag divarna hela vägen med bakgrundsfärg?
Har provat med bakgrundsbild och bakgrundsfärg. Har provar med height: auto i båda divarna men bakgrundsfärgen eller bilden tar slut där innehållet i div-en slutar trots att båda divarna har samma höjd.
Alltså, vänsterdiven har en bakgrundsbild och högerbilden en annan. Det ser ju aningen dumt ut när den blå bakgrunden i högerdiven slutar mitt på sidan när innehållet i den vänstra är längre... :-(

Mycket tacksam för svar, har tyvärr ingen url att visa ännu.

PepeJeriaMedlem sedan feb. 2003774 inlägg

11 jan. 2004 11:39#2

Skulle underlätta om du visade lite kod. Då menar jag bara koden som visar problemet och inget annat.

jarvkloMedlem sedan juli 20013 378 inlägg

11 jan. 2004 12:29#3

Hmm...

Många slåss med samma problem.

Vill man lösa det hela i "ren" HTML får man trixa lite med var man lägger sina bakgrundsbilder - se en ny artikel om sådant i AListApart.

Annars får man ta till lite Javascript som utjämnar kolumnernas storlek när sidan laddats klart (dvs anropas från <body onload="...">)...
Sökte och hittade http://www.webforum.nu/showthread.php?s=&forumid=24&threadid=58565 här på wF som ett exempel.
Den koden applicerad på ditt problem (som jag förstår det ur din beskrivning) skulle det kunna se ut nånting såhär:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
  <title>Ett exempel</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css"> 
<!--
html, body {margin:0;padding:0;height:100%;text-align:center;}
#container {
  text-align:left;
  margin:auto;
  width:400px;
  border:1px solid maroon;
}
#ena { 
  clear:left;
  float:left;
  background-color:orange;
  width:30%;
}
#andra {
  float:left;
  background-color:yellow;
  width:70%;
}
#header {
  border-bottom:1px solid maroon;
  text-align:center;
}
#footer {
  clear:both;
  border-top:1px solid maroon;
  text-align:center;
}
-->
</style>
<script type="text/javascript">
<!--
function fixColumns() {
	elmLeftColumn = document.getElementById("ena");
	elmRightColumn = document.getElementById("andra");
	intLeftHeight = elmLeftColumn.offsetHeight;
	intRightHeight = elmRightColumn.offsetHeight;

	if (intLeftHeight < intRightHeight) {
		elmLeftColumn.style.height = intRightHeight + "px";
	} else {
		elmRightColumn.style.height = intLeftHeight + "px";
	}
}
//-->
</script>
</head>
<body onload="fixColumns();">
<div id="container">
  <div id="header">Header</div>
  <div id="ena">
    Ena kolumnen
  </div>
  <div id="andra">
    Andra kolumnen<br />
    som är<br />
    lite högre
  </div>
  <div id="footer">Footer</div>
</div>
</body>
</html>

Provkör exemplet här: http://member.webforum.nu/2241/likahogakolumnermedscript.html

SurfarenMedlem sedan aug. 2003627 inlägg

11 jan. 2004 13:42#4

Jag löste detta med en bakgrundsbild häromdan...

http://www.webforum.nu/showthread.php?s=&threadid=92321&forumid=12