problem med siden bliver for bred
Er igang med mit første forsøg i css og jeg ender ud med en alt for bred side. Det er lidt nemmere at se end at forklare så her er koden;HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ (...)
<html xmlns="http://www.w3.org/ (...)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lotus Yoga</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page-wrap">
<ul id="nav">
<a href="#">Forside</a>
<a href="#">Om Lotus Yoga</a>
<a href="#">Yoga former</a>
<a href="#">Skema</a>
<a href="#">Priser</a>
<a href="#">Rejser</a>
<a href="#">Kontakt</a>
</ul>
<div id="main-content">
<div id="left-col">
<div id="quick-jumps">
<h3>Noget tekst</h3>
<p>Her skal der stå noget tekst det må vi finde ud af...!</p>
</div>
<h1>Overskrift skal stå her</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta enim eget metus cursus convallis. Cras vehicula, dui a aliquam semper, elit enim sollicitudin lacus, et semper nulla sapien non est. Praesent ligula dolor, porta et bibendum in, fermentum nec lectus. Nullam lorem neque, ultricies vel sodales semper, laoreet quis nulla. Aliquam venenatis rutrum elit, a adipiscing libero vestibulum nec. Etiam pellentesque, nisi nec mollis bibendum, lectus arcu tincidunt nisi, quis mattis libero dolor eu ligula. Nulla diam dui, venenatis eu convallis ornare, accumsan iaculis lacus. Suspendisse potenti. Curabitur varius aliquet lorem eget vestibulum. Nullam tortor nulla, fringilla id sollicitudin in, pharetra sit amet felis. Suspendisse mollis lorem in ligula auctor ut tincidunt tortor tincidunt. Etiam ultricies dapibus dolor, vel vulputate felis dignissim bibendum. Aliquam erat volutpat.</p>
<p>Pellentesque ultrices feugiat neque ut ultricies. Cras justo lectus, tempor at convallis sed, tempor nec nisi. Curabitur pharetra nulla quam, quis malesuada urna. Nulla facilisi. Pellentesque condimentum, arcu non ullamcorper aliquam, dolor dui viverra justo, nec bibendum ipsum lorem non nulla. Nam ut purus hendrerit odio convallis scelerisque. Proin porttitor purus sit amet felis pretium sagittis. Proin sem turpis, luctus id suscipit at, mattis nec nulla. Nam odio lorem, posuere non mollis vel, mollis ac velit. Cras ac neque nisl, eget volutpat nulla. Ut arcu augue, hendrerit quis sollicitudin et, faucibus sagittis augue. Pellentesque non est et enim scelerisque blandit nec in mi.</p>
<p>Nulla rhoncus fringilla dapibus. Sed quis lacus ac augue pulvinar luctus. Ut luctus fringilla aliquam. Donec commodo enim quis nisl tincidunt iaculis. Aliquam congue sollicitudin feugiat. Aenean ac neque ligula. Sed erat nisi, tristique a dictum nec, feugiat et nulla. In hac habitasse platea dictumst. Ut mollis dignissim orci eu facilisis. Nulla varius scelerisque ipsum, non pellentesque elit egestas ut. Mauris eu nibh orci. Cras nisl lacus, sollicitudin sed ornare vel, vulputate sit amet eros. Etiam mi sem, fermentum eu tincidunt eu, tincidunt nec orci. Suspendisse ligula nibh, eleifend vitae ultricies quis, ultrices et lectus. Suspendisse potenti.</p>
</div><!--END left-col-->
<div id="right-col">
<h2>nyheder</h2>
<p>Her skal der stå hvad der sker af forskellige ting</p>
</div>
<div class="clear"></div>
</div> <!--END main-content-->
</div> <!--End page-wrap-->
<div id="footer">
<p>© 2011 Lotus Yoga</p>
</div>
</body>
</html>
CSS:
style {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
font-family: helvetica, sans-sarif;
}
a {
font-size: 120%;
margin-bottom: 1.0m;
}
p {
font-size: 1.3m;
line-height: 1.4m;
margin-bottom: 0.8m;
}
h1 { font-size: 3.0m; margin-bottom: 0.8m; }
h2 { font-size: 2.0m; text-transform: uppercase; margin-bottom: 0.8m; }
h3 {font-size:1.6m; text-transform: uppercase; font-style: italic; letter-spacing: 2px; background: #00416a; color: white; padding: 5px; margin-bottom: 0.5px; }
.clear { clear: both; }
div#page-wrap {
width: 1280px;
margin: auto;
}
ul#nav {
height: 361px; width: 1280px;
margin: -8px;
background: url(images/logo.jpg) no-repeat;
padding-left: 305px;
}
ul#nav a {
display: block;
width: 90px;
float: left;
margin-top: 320px;
color: white;
font-weight: bold;
text-decoration: none;
text-align: center;
}
div#main-content {
padding-bottom: 50px;
}
div#main-content div#left-col {
float: left;
width: 800px;
}
div#main-content div#left-col div#quick-jumps {
padding-top: 20px;
padding-left: 50px;
padding-bottom: 50px;
width: 200px;
float: left;
margin-right: 15px;
text-align: center;
}
div#main-content div#left-col div#quick-jumps p {
text-transform: uppercase;
font-weight: bold;
letterspacing: 1px;
}
div#main-content div#right-col {
margin-top: 30px;
float: right;
width: 250px;
border-top: 10px solid #00416a;
padding-top: 15px;
}
div#main-content div#right-col h2 {
padding-left: 20px;
}
div#main-content div#right-col p {
font-size: 90%;
color: black;
padding-left: 20px;
}
div#footer {
background: url(images/footer.png) repeat-x;
color: white;
padding: 10px 0 10px 0;
text-transform: uppercase;
border-top: 2px solid black;
text-align: center;
}
