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.
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 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 