Nogle gange har IE lidt svært ved at erkende at der faktisk er en float... normalt skal man holde sig fri af denne block - men alligevel sker det at IE bare skriver oveni den (hvis du har ie, så prøv at fjern/udkommentér margin-kommandoen og se forskellen)
En anden grund - og det er faktisk ikke et IE hack - men en nødvendighed- er at efter menuen er færdig, så skal teksten fra content jo ikke ind og skrive under menuen, men forblive ude... (er ikke så god til at forklare det :-)
jeg har lige fundet ud af at height: xx px skal fjernes - ellers vil content ikke vokse med indholdet...
Jeg har lavet en version, hvor din lorem Ipsum tekst benyttes :-)
<html>
<style type="text/css">
body {
margin: 0;
}
#header {
height: 50px;
border-bottom: 2px solid #ddf;
}
#menu {
width: 150px;
float: left;
padding:0;
margin: 0;
border-bottom:2px solid #ddf;
}
#content {
padding-left: 2px;
margin-left: 150px;
border-left: 2px solid #ddf;
width: 80%;
}
#footer {
border-top:2px solid #ddf;
}
</style>
<body>
<div id="header"> HEADER </div>
<div id="menu">
Menu <br/>
Menu <br/>
Menu <br/>
Menu <br/>
Menu <br/>
Menu <br/>
Menu <br/>
Menu <br/>
Menu <br/>
Menu <br/>
Menu <br/>
Menu <br/>
Menu <br/>
</div>
<div id="content">
<h1 style="margin:0; background-color: #ffd;">xxx</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum non pede in tortor accumsan cursus. Nullam convallis magna et elit. Morbi eu mi. Donec volutpat metus eu leo. In dui. Sed eget wisi. Aenean elementum rhoncus nibh. Duis mollis sapien. Sed id neque. Morbi sed nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam viverra. Morbi semper enim nec ligula. Sed mi ipsum, pretium nec, pharetra id, sollicitudin ut, augue.
<p>Aliquam vel arcu. Nam sapien. Aliquam vehicula tellus in orci. Sed adipiscing, felis sed lobortis rutrum, lectus turpis consectetuer erat, ac convallis est magna quis pede. Sed sit amet urna. Ut imperdiet tortor sed odio. Vestibulum rutrum dolor vitae libero. Cras varius ligula a mauris. Aenean quis turpis eget mauris tristique gravida. Etiam posuere, orci quis congue tristique, metus pede ultricies urna, at venenatis sem ante nec purus. </p>
<p>Morbi mollis pellentesque nunc. Morbi porttitor velit vel purus. Donec in tellus. Duis gravida, odio at euismod dapibus, nunc augue porta neque, vel nonummy elit augue eu nibh. Sed vehicula imperdiet urna. Integer et enim. Vivamus neque. Aliquam volutpat adipiscing nisl. Suspendisse metus quam, rutrum sed, sagittis ac, imperdiet vitae, ipsum. Nunc egestas augue sit amet augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nullam quam. Maecenas tristique pulvinar leo. </p>
<p>Nunc ipsum. Vivamus eu mi ac odio viverra viverra. Proin at metus. Quisque enim lectus, blandit vel, accumsan id, faucibus a, purus. Curabitur ullamcorper tincidunt ipsum. Nam porta magna in purus. Donec libero massa, scelerisque at, condimentum at, iaculis et, ante. Proin nonummy erat ut magna. In hac habitasse platea dictumst. Ut nibh libero, aliquet tincidunt, consectetuer id, gravida quis, pede. Quisque dui augue, pulvinar eu, pharetra vitae, porttitor vitae, urna. Nunc in dui eu nunc ultricies dapibus. </p>
<p>Nam tincidunt consectetuer nunc. Duis volutpat sollicitudin pede. Vivamus consequat vehicula velit. Curabitur eget dolor. Nunc vitae turpis. Phasellus dignissim justo nec orci. Aenean sem neque, egestas ac, mollis sed, varius et, quam. Ut quis wisi in diam luctus posuere. Etiam a urna in ipsum aliquet adipiscing. Phasellus nec mauris vel nulla venenatis fermentum. Nulla facilisi. Cras wisi. Suspendisse vitae tortor id quam pretium pretium. Duis velit urna, dapibus at, congue non, dictum ut, ipsum. Donec egestas odio nec felis. Curabitur nec neque. </p>
<p>Duis tellus. Etiam sapien purus, rutrum ac, porta vel, tincidunt vel, neque. Proin nec wisi et orci mattis vestibulum. Donec imperdiet. Curabitur lacus. Mauris aliquet ullamcorper magna. Etiam orci dolor, fringilla ut, ultrices id, faucibus vitae, orci. Sed purus eros, blandit sed, lacinia non, aliquet vel, justo. Mauris mauris. Duis tincidunt, metus ut pellentesque tempus, tellus lorem pharetra enim, consequat suscipit nibh nibh non ante. Duis fermentum augue quis sem. Aliquam ut urna ut turpis ultricies scelerisque. Cras sem. Donec ipsum. Aliquam id eros. </p>
<p>Mauris metus ante, volutpat ut, ultricies non, fermentum sit amet, mi. Sed a turpis. Praesent massa nisl, fermentum ut, tincidunt eu, feugiat at, ante. Nulla tempus, metus ut consequat suscipit, massa est tempus turpis, a semper sem arcu a orci. Phasellus euismod libero sit amet dolor. Aliquam sagittis massa a diam. Curabitur at nisl non felis scelerisque bibendum. Integer eleifend augue vitae lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur nonummy diam quis ante. Curabitur vestibulum sem et turpis. </p>
<p>Donec sed eros. Donec adipiscing elementum urna. Sed dui sem, imperdiet id, pretium at, feugiat vitae, nulla. Suspendisse fermentum, neque id posuere lacinia, diam elit accumsan magna, a gravida nibh pede ac urna. Ut lorem leo, rhoncus in, sagittis ut, vehicula ut, diam. Nam ante sem, tristique vel, hendrerit sed, pretium id, wisi. Cras sed mauris eu eros porttitor volutpat. Nullam vitae neque. Etiam pretium molestie dolor. Nullam in sem eu est luctus luctus. Praesent elementum dictum metus. </p>
<p>In dui justo, vulputate et, feugiat eu, fringilla at, dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis lacus. Donec ullamcorper, nulla a venenatis gravida, odio leo congue nunc, eu placerat dui augue in libero. Suspendisse venenatis. Praesent scelerisque neque at turpis. Curabitur dictum tellus nec magna. Aenean odio. Aenean dignissim cursus urna. Phasellus eu mauris. Duis nisl. Nam et massa sit amet quam porttitor aliquet. Proin venenatis imperdiet ipsum. Cras nec odio. Etiam vulputate mollis sem. Maecenas scelerisque augue et arcu vehicula feugiat. Duis at odio. </p>
<p>Vivamus sodales, neque at sodales malesuada, dui lacus sollicitudin velit, ac luctus nibh nisl in tellus. Ut id erat ac felis vulputate bibendum. In ac justo. Donec dictum, orci eget aliquet pellentesque, nibh felis feugiat sapien, non suscipit turpis arcu non nisl. Morbi eros velit, adipiscing eget, adipiscing ac, luctus quis, eros. Praesent magna lacus, pretium id, tempor a, tempus id, erat. Etiam lacus nulla, volutpat ut, tempus eget, laoreet vel, tellus. Etiam ultricies porta wisi. In imperdiet. Mauris dapibus magna sed dui. Vestibulum tempus justo at eros. Nulla feugiat velit nec mauris. In ut ante at elit porta vestibulum. Maecenas venenatis vestibulum augue. Etiam sollicitudin turpis vel pede. Sed tortor urna, nonummy ut, ornare eget, ornare sed, sapien. Etiam augue.</p>
<p>Nunc ipsum. Vivamus eu mi ac odio viverra viverra. Proin at metus. Quisque enim lectus, blandit vel, accumsan id, faucibus a, purus. Curabitur ullamcorper tincidunt ipsum. Nam porta magna in purus. Donec libero massa, scelerisque at, condimentum at, iaculis et, ante. Proin nonummy erat ut magna. In hac habitasse platea dictumst. Ut nibh libero, aliquet tincidunt, consectetuer id, gravida quis, pede. Quisque dui augue, pulvinar eu, pharetra vitae, porttitor vitae, urna. Nunc in dui eu nunc ultricies dapibus. </p>
<p>Nam tincidunt consectetuer nunc. Duis volutpat sollicitudin pede. Vivamus consequat vehicula velit. Curabitur eget dolor. Nunc vitae turpis. Phasellus dignissim justo nec orci. Aenean sem neque, egestas ac, mollis sed, varius et, quam. Ut quis wisi in diam luctus posuere. Etiam a urna in ipsum aliquet adipiscing. Phasellus nec mauris vel nulla venenatis fermentum. Nulla facilisi. Cras wisi. Suspendisse vitae tortor id quam pretium pretium. Duis velit urna, dapibus at, congue non, dictum ut, ipsum. Donec egestas odio nec felis. Curabitur nec neque. </p>
<p>Duis tellus. Etiam sapien purus, rutrum ac, porta vel, tincidunt vel, neque. Proin nec wisi et orci mattis vestibulum. Donec imperdiet. Curabitur lacus. Mauris aliquet ullamcorper magna. Etiam orci dolor, fringilla ut, ultrices id, faucibus vitae, orci. Sed purus eros, blandit sed, lacinia non, aliquet vel, justo. Mauris mauris. Duis tincidunt, metus ut pellentesque tempus, tellus lorem pharetra enim, consequat suscipit nibh nibh non ante. Duis fermentum augue quis sem. Aliquam ut urna ut turpis ultricies scelerisque. Cras sem. Donec ipsum. Aliquam id eros. </p>
<p>Mauris metus ante, volutpat ut, ultricies non, fermentum sit amet, mi. Sed a turpis. Praesent massa nisl, fermentum ut, tincidunt eu, feugiat at, ante. Nulla tempus, metus ut consequat suscipit, massa est tempus turpis, a semper sem arcu a orci. Phasellus euismod libero sit amet dolor. Aliquam sagittis massa a diam. Curabitur at nisl non felis scelerisque bibendum. Integer eleifend augue vitae lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur nonummy diam quis ante. Curabitur vestibulum sem et turpis. </p>
<p>Donec sed eros. Donec adipiscing elementum urna. Sed dui sem, imperdiet id, pretium at, feugiat vitae, nulla. Suspendisse fermentum, neque id posuere lacinia, diam elit accumsan magna, a gravida nibh pede ac urna. Ut lorem leo, rhoncus in, sagittis ut, vehicula ut, diam. Nam ante sem, tristique vel, hendrerit sed, pretium id, wisi. Cras sed mauris eu eros porttitor volutpat. Nullam vitae neque. Etiam pretium molestie dolor. Nullam in sem eu est luctus luctus. Praesent elementum dictum metus. </p>
<p>In dui justo, vulputate et, feugiat eu, fringilla at, dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis lacus. Donec ullamcorper, nulla a venenatis gravida, odio leo congue nunc, eu placerat dui augue in libero. Suspendisse venenatis. Praesent scelerisque neque at turpis. Curabitur dictum tellus nec magna. Aenean odio. Aenean dignissim cursus urna. Phasellus eu mauris. Duis nisl. Nam et massa sit amet quam porttitor aliquet. Proin venenatis imperdiet ipsum. Cras nec odio. Etiam vulputate mollis sem. Maecenas scelerisque augue et arcu vehicula feugiat. Duis at odio. </p>
<p>Vivamus sodales, neque at sodales malesuada, dui lacus sollicitudin velit, ac luctus nibh nisl in tellus. Ut id erat ac felis vulputate bibendum. In ac justo. Donec dictum, orci eget aliquet pellentesque, nibh felis feugiat sapien, non suscipit turpis arcu non nisl. Morbi eros velit, adipiscing eget, adipiscing ac, luctus quis, eros. Praesent magna lacus, pretium id, tempor a, tempus id, erat. Etiam lacus nulla, volutpat ut, tempus eget, laoreet vel, tellus. Etiam ultricies porta wisi. In imperdiet. Mauris dapibus magna sed dui. Vestibulum tempus justo at eros. Nulla feugiat velit nec mauris. In ut ante at elit porta vestibulum. Maecenas venenatis vestibulum augue. Etiam sollicitudin turpis vel pede. Sed tortor urna, nonummy ut, ornare eget, ornare sed, sapien. Etiam augue.</p>
<p id="cotentEnd" style="margin:0; height:0;"> </p>
</div>
<div id="footer"></div>
</body>
</html>
Ny bruger
Nybegynder
Opret
Preview
