In my htm file, I have the following htm codes:
<div id="masthead">
<div id="logo">
#logo<br />
#logo<br />
#logo</div>
<div id="header">
#header<br />
#header<br />
#header</div>
</div>
<div id="container">
<div id="right_col">
#right_col<br />
#right_col<br />
#right_col<br />
#right_col<br />
#right_col</div>
<div id="top_banner">
#top_banner<br />
#top_banner<br />
#top_banner<br />
#top_banner</div>
<div id="left_col">
#left_col<br />
#left_col<br />
#left_col<br />
#left_col<br />
#left_col</div>
<div id="page_content">
#page_content<br />
#page_content<br />
#page_content<br />
#page_content</div>
</div>
<div id="footer">
#footer <br />
#footer <br />
#footer <br />
#footer </div>
Additionally, there is a css file with the following styling:
/* CSS layout */
body {
margin: 0;
padding: 0;
background-color:silver;
font-family:tahoma;
}
#masthead {
min-width: 1000px;
}
#logo {
float: right;
background-color:lime;
width: 250px;
}
#header {
margin-right:250px;
background-color:aqua;
}
#container {
clear: both;
min-width: 1000px;
}
#left_col {
float: left;
width: 200px;
background-color:fuchsia;
}
#right_col {
float: right;
width: 200px;
background-color:orange;
}
#page_content {
margin-left: 200px;
margin-right: 200px;
background-color:red;
}
#top_banner {
margin-right: 200px;
background-color:maroon;
}
#footer {
clear: both;
background-color:yellow;
}
After changing the order of the divs in the html code, specifically moving the "left_col" after the "page_content", the pages are not loading correctly. The "left_col" div is displaying incorrectly as shown in this image: