Jag tror (seriöst) att lipsum.com kan hjälpa dig här. :)
Frågan#1
Hejsan!
Har suttit och pillat ihop en grunddesign som jag är väldigt nöjd med, det enda jag inte riktigt får ihop är hur jag ska göra för att få sidan #main och #right att alltid strecka ut sig ner till botten av sidan.
Vill alltså att Main och Right ska dra ut höjden till 100%.
Tack på förhand
MVH
/r redigerat bort länken pga utveckling på den adressen, kopierar dock in koden här så alla kan se hur jag löste det.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
* {margin: 0; padding: 0;}
html, body {height: 100%;}
body {font: 0.75em Verdana, sans-serif; line-height: 140%; color: #333; background: #FFF;}
a {text-decoration: none;}
a img {border: none;}
a:link, a:visited {color: #555; border-bottom: 1px solid #555;}
ul, li {margin: 0 0 0 13px; padding: 0 13px 0 0;}
#container {margin:0 auto; width: 750px; min-height:100%; text-align: left; background: #fff url(interface/main.gif) repeat-y 50% 0;}
#header {width: 750px; height: 80px; background: #E4E4F4; border-bottom: 1px solid #CCC;}
#main {width: 549px; float: left;}
#main p {padding: 20px;}
#main a {font: 1em Verdana, sans-serif; border-bottom-width: 1px;}
#main a:hover {border-bottom-width: 1px;}
#seperator {width: 1px; float: left; line-height: 0;}
#right {width: 200px; float: left;}
#right p {padding: 13px;}
#right a {font: 1em Verdana, sans-serif; border-bottom-width: 0;}
#right a:hover {border-bottom-width: 1px;}
#demarcate {clear: both; width: 750px; height: 37px;}
#footer {border-width: 1px 0 1px 0; border-style: solid; border-color: #666; height: 37px; font-size: 0.85em; background: #E4E4F4; margin-top:-39px;}
#footer p {margin-left: 200px; padding: 1em 20px; border-left: 1px solid #666; background: #FFF;}
</style>
<!--[if IE]>
<style type="text/css">
#container {height:100%;}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">&nbsp;</div>
<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In risus mi, tempor eget, tempus nec, gravida sit amet, ante.
Donec et nisi. Morbi velit leo, imperdiet ut, venenatis vel, faucibus facilisis, diam.
Nulla tincidunt nibh in nunc. In id ipsum vel mauris faucibus ullamcorper.
Nulla diam enim, mattis sed, tincidunt non, viverra vel, purus. Cras quis velit. Nunc fringilla, nunc sit amet egestas semper,
dui metus dapibus leo, vitae consectetuer nulla neque sit amet augue. Ut tempor volutpat risus.
Pellentesque velit risus, suscipit eu, pharetra sed, feugiat id, urna. Nullam urna pede, suscipit ut,
nonummy interdum, luctus id, enim. Integer aliquet, justo in porttitor ultrices, velit erat consectetuer
nibh, in vestibulum risus erat quis arcu. Phasellus gravida facilisis ligula. In eu risus porta sem euismod
hendrerit. Vivamus risus tellus, consectetuer sed, vehicula sed, rutrum vel, nisi. Vivamus sollicitudin tellus eu tortor.<br /><br />
Nulla facilisi. Integer ultrices ultrices purus. Curabitur ultrices, purus in placerat tristique, est libero pulvinar massa,
commodo luctus turpis pede vitae magna. Etiam vehicula ante vitae odio. Maecenas dui. Quisque interdum.
Etiam faucibus scelerisque elit. Proin neque arcu, rhoncus et, venenatis in, consequat eu, risus. Duis libero.
Donec egestas, risus et facilisis vulputate, libero velit congue tellus, a egestas augue lorem at sapien.
Proin porta euismod magna. Duis sed mauris vitae odio commodo pharetra. Nunc dictum diam ut nulla.
Duis tempus commodo nisl.<br /><br />
Phasellus ac felis a nulla accumsan sollicitudin. Nunc tellus nunc, lacinia vel, fermentum sed, imperdiet id, purus.
Cras ullamcorper ligula vitae ipsum sagittis mollis. Nullam tristique consequat ligula.
Etiam facilisis, leo quis sagittis bibendum, metus elit dapibus odio, quis dapibus tellus arcu vitae dolor.
In consequat mi at justo. Maecenas magna. Integer tempor, quam ut pretium scelerisque, enim erat luctus velit,
ut pulvinar mauris nisl eu felis. Sed et purus. Integer dapibus mi vitae erat. Vestibulum tempus dictum risus.
Integer id lacus. In vel lectus sit amet purus iaculis cursus. Nulla hendrerit lacus sed nisi. Nulla facilisi.
Pellentesque libero diam, lobortis ut, commodo a, dapibus id, elit. Aenean tempus neque in nunc interdum tempor.
Pellentesque laoreet orci vitae arcu. Nam tellus dui, facilisis sit amet, cursus a, elementum eget, turpis.
Nullam ut sem in mi ultricies feugiat.<br /><br />
Aenean auctor adipiscing urna. Ut interdum urna sit amet orci. Mauris tincidunt laoreet urna.
Fusce imperdiet, risus vel porttitor egestas, risus purus iaculis nisl, nec fringilla urna sem non lorem.
Donec dolor odio, scelerisque in, gravida et, pellentesque et, nunc. Curabitur vitae diam.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Etiam a odio fringilla odio aliquet scelerisque. In at ante sed nibh condimentum egestas. Curabitur gravida.
In est. Cras eros sapien, sollicitudin fringilla, congue non, accumsan eu, enim. Sed viverra commodo augue.
Nullam hendrerit velit. Phasellus ut sapien. Nunc turpis purus, molestie nec, cursus at, rutrum eu, orci.
Vivamus vehicula sodales sem. Suspendisse potenti.<br /><br />
Sed interdum, justo sed tincidunt pretium, erat sem cursus enim, at sodales ligula est ut justo.
Curabitur vel nibh eget lacus ultrices pulvinar. Duis varius, odio at consequat gravida, mi arcu
convallis velit, sed auctor dui orci vel odio. Phasellus ornare tortor in nunc. Sed lorem.
Duis purus ante, scelerisque vitae, condimentum id, aliquet ut, lacus. Aliquam non magna in
sapien scelerisque ultrices. Donec lectus quam, vestibulum vitae, pretium sed, commodo ac, odio.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Morbi condimentum turpis eu lectus.
</p>
</div>
<div id="separate">&nbsp;</div>
<div id="right">
<p>
Right
</p>
</div>
<div id="demarcate">&nbsp;</div>
</div>
<div id="footer">
<p>
Footer
</p>
</div>
</body>
</html>
