CSS for float-test4

  <script>
    html  { background-color: red; }  # 0,0,0,1
     html *  { padding 5px; }  # 0,0,0,1
     body  { background-color: gray; margin: 10px; border: 2px black solid; width: 450px; }  # 0,0,0,1
     #header  { width: 100%; background-color: silver; text-align:center;}  # 0,1,0,0
     #leftcol  { float: left; width: 48%; border: 1px dashed gray; }  # 0,1,0,0
     #rightcol  { float: right; width: 48%; border: 1px dashed gray; }  # 0,1,0,0
     #footer  { float: clear; width: 100%; text-align: center; }  # 0,1,0,0
  </script>
  

Page Content

<div id="header">
<h1>Header</h1>
</div>
<div id="leftcol">
<p style="background-color: blue;">paragraph 1 and various other texts.
with more filler: blagh blagh blagh blah</p>
<p style="background-color: green;">paragraph 2 is 'display: block;' and various other texts.
with more filler: blagh blagh blagh blah</p>
</div>
<div id="rightcol">
<p style="background-color: yellow;">paragraph 3 and various other texts.
with more filler: blagh blagh blagh blah</p>
<p style="background-color: brown;">paragraph 4 is 'display: block;' and various other texts.
with more filler: blagh blagh blagh blah</p>
</div>
<p style="background-color: white;">
This paragraph is a normal flow paragraph.
</p>
<div id="footer">
<h3>Footer Line</h3>
</div>
  

This paragraph is a normal flow paragraph.