Social Icons

Pages

Tuesday, November 29, 2016

CSS Positioning 15/25

Float for two
As you may have already guessed, we can use floated elements to naturally divide our pages into different sections. Try it!


Instructions
Set your <div> to float to the right and your <p> to float to the left.

div {
 height: 300px;
 width: 300px;
 border: 2px solid black;
 border-radius: 5px;
 background-color: #308014;
        float:right;
 
}

p {
 font-family: Verdana, sans-serif;
 font-size: 20px;
 width: 280px;
 float:left;
 
}

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  <title>Result</title>
 </head>
 <body>
  <div></div>
  <p>Check it out! I'm a block of text, but the &lt;div&gt; and I can live in harmony. Boats on a sea, man. Boats on a sea.</p>
 </body>
</html>

No comments:

Post a Comment