Genomgång - Att styra sidlayout med float

This is an old revision of the document!

<!DOCTYPE html>
<html lang="sv">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style/style.css">
  <title>Float</title>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere fringilla lorem nec dictum. Donec lacinia, dui vitae aliquam euismod, justo ligula tincidunt tortor, nec semper metus nulla at arcu. Ut vestibulum urna vitae diam vestibulum at aliquam justo aliquam. Proin metus turpis, dignissim in euismod non, mattis eget justo. Suspendisse potenti. Suspendisse aliquet justo ut diam placerat non pellentesque turpis ornare. Integer sit amet orci non justo volutpat aliquam. Sed ut augue non risus tristique auctor. Morbi rhoncus interdum semper. Maecenas tempus blandit tortor, non tincidunt nunc dignissim in.
  </p>
  <p id="important">Sed mi purus, tempor consequat mattis sit amet, ornare euismod nibh. Etiam lorem odio, viverra vitae viverra quis, scelerisque quis risus. Suspendisse vulputate urna erat, id lobortis sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque a nibh et nisi eleifend mattis. Aliquam urna erat, adipiscing id laoreet non, fermentum ut nibh. Suspendisse euismod tellus sed velit commodo in elementum odio tristique. Donec sed ullamcorper mi.
  </p>
  <p>Fusce elementum sapien sit amet augue tincidunt fringilla. Nam laoreet lorem nec ipsum convallis aliquam. Cras vel interdum nibh. Suspendisse vitae mi vel tellus hendrerit rhoncus. Cras sit amet eros sit amet risus suscipit venenatis. Cras tincidunt fringilla egestas. Quisque quis metus quis magna malesuada facilisis. In lacinia fringilla gravida. Mauris ac nunc eros, eget feugiat turpis.
  </p>
  <p id="moreimportant">Vivamus consequat purus porttitor arcu molestie tempor. Aliquam erat volutpat. Donec tincidunt est massa, ut ultricies risus. Maecenas accumsan leo sed elit porttitor facilisis. Praesent hendrerit convallis dolor, at blandit arcu porta eget. Pellentesque ligula purus, consequat a lobortis id, varius non erat. Praesent quis lobortis dolor. Mauris et purus vel libero aliquam dapibus nec nec enim. Sed id ipsum augue, non pharetra ipsum. Suspendisse potenti.
  </p>
  <p>Nullam tristique pharetra justo, in ultricies enim pellentesque quis. Integer tincidunt tempor sem, eget fringilla nisi congue non. Sed pharetra congue sapien, vitae volutpat mauris dictum eget. Suspendisse convallis risus sed augue varius eleifend. Proin ac faucibus augue. Nam sit amet felis nisi. In a libero leo. Proin non turpis neque. Quisque quis eros libero.
  </p>
  <p>In tempus sem at massa tincidunt tincidunt. Integer libero turpis, rhoncus vitae hendrerit at, vehicula id orci. Nam dapibus feugiat lectus in consectetur. Curabitur libero arcu, interdum vel viverra adipiscing, lacinia et libero. Duis quis massa ut nibh ultricies ultrices. Pellentesque turpis urna, convallis sit amet luctus id, dapibus in turpis. Quisque elit ante, aliquam porttitor auctor et, imperdiet non ligula.
  </p>
  <p id="conclusion">Nulla augue risus, mollis non auctor in, faucibus et est. Integer nunc turpis, egestas ultricies aliquet eu, ultrices non tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque at turpis in arcu rutrum pellentesque sed eget nunc. Suspendisse elementum, odio ut blandit ullamcorper, risus eros consectetur erat, molestie scelerisque diam mauris a enim. Aliquam tincidunt mauris nec massa consequat venenatis. Integer viverra diam vitae nisi mollis hendrerit. Nullam lectus nunc, imperdiet in mollis sit amet, mattis eu velit. Proin ipsum elit, dapibus vitae commodo quis, posuere et velit. Duis venenatis, magna id venenatis tincidunt, mi nisl dictum nibh, id faucibus tellus sapien quis mauris. Etiam tempor euismod odio, id faucibus mi vestibulum id. Donec ultricies lacinia eleifend. Nunc eget quam lacus. In mattis lobortis sodales.
  </p>
  </body>
</html>

För att formattera denna html använde jag den css som finns i den första mallen ni fick, med följande tillägg:

p#important {

color: #ff0000;
border: 1px black solid;
float: left;
width: 200px;
padding: 10px;

}

#moreimportant {

border: 1px black solid;
float: right;
width: 200px;
padding: 10px;

}

#conclusion {

clear: both;

}