Instructions

• 1). Create two divisions (divs) in the body of your hypertext markup language (HTML) content. These divs may include an inline style of "float: left". The HTML code for this is:
  
  <div style="float:left">content</div>
  <div style="float:left">resources</div>.
  
  (Do not include the period at the end as part of that command or further commands.)
  
  Replace "content" and "resources" with your web page's content.
  
  
• 2). Create a clearing div. A clearing div stops elements from floating on your web page. This is the HTML code for a div with a "clear" class:
  
  <div></div>.
  
  In your stylesheet, define that clear class with the following attributes:
  
  font-size: 0px;
  margin: 0;
  padding: 0;
  line-height: 0px;
  clear: both;
  float: none;
  border: none;
  
  The clearing div cancels the floating elements from the two floating divs created in Step 1. If we didn't clear the floating divs, then any subsequent content continues to "float" to the left of the last container.
  
  
• 3). Create a gutter between the two floated columns. A gutter is the space used to separate the two columns visually. There are five ways to create a gutter:
  
  1) Add 20 pixels of right-padding to the first floating div. The first floating div then looks like this: <div style="float:left; padding-right: 20px;">content</div>.
  
  2) Add 20 pixels of left-padding to the second floating div: <div style="float:left; padding-left: 20px;">resources</div>.
  
  3) Add 10 pixels of right-padding to the first floating div and 10 pixels of left-padding to the second floating div:
  
  <div style="float:left; padding-right:10px;">content</div>
  <div style="float:left; padding-left: 10px;">resources</div>.
  
  4) Create a new div that goes between the first floating div and the second floating div:
  
  <div style="float:left;">content</div>
  <div></div>
  <div style="float:left;">resources</div>.
  
  This "gutter" class should have the following attributes:
  
  display: block;
  float: left;
  width: 20px; .
  
  5) Instead of the second container floating left, it can float right. Give the floating containers equal widths that are not equal to the parent container. For example, if your main container has a width of 900 pixels, then your floating containers can have a width of 440 pixels, giving you a 20-pixel gutter automatically. Here is the code:
  
  <div style="float:left; width:440px;">content</div>
  <div style="float:right; width:440px;">resources</div>.
  
  
• 4). Save your file with the .html extension.
  
  
• 5). Open your HTML file in a web browser and review the web page. Make edits to your code as necessary to get desired results.