Social Icons

Pages

Tuesday, November 29, 2016

CSS Positioning 16/25

Clearing elements
Unfortunately, we sometimes mix large floating elements with non-floating ones, and elements do end up on top of each other.
See your footer (the blue bit between the two columns)? It's stuck back there because we haven't told it something very important: to clear the other elements on the page!
If you tell an element to clear: left, it will immediately move below any floating elements on the left side of the page; it can also clear elements on the right. If you tell it to clear: both, it will get out of the way of elements floating on the left and right!
The syntax is what you're used to:
element {
    clear: /*right, left, or both*/
}


Instructions
Tell the div with the ID #footer toclear both.

div {
 border-radius: 5px;
}

#header {
 height: 50px;
 background-color: #F38630;
 margin-bottom: 10px;
}

.left {
 height: 300px;
 width: 150px;
 background-color: #A7DBD8;
 float: left;
 margin-bottom: 10px;
}

.right {
 height: 300px;
 width: 450px;
 background-color: #E0E4CC;
 float: right;
 margin-bottom: 10px;
}

#footer {
 height: 50px;
 background-color: #69D2E7;
 Clear:both;

}

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  <title>Result</title>
 </head>
 <body>
  <div id="header"></div>
  <div class="left"></div>
  <div class="right"></div>
  <div id="footer"></div>
 </body>

</html>

No comments:

Post a Comment