I am facing an issue getting the mid section content div to display below the top div. The bottom div is currently overlapping and showing up underneath or at the bottom of the top div.
To help you understand better, here are two images and the relevant code:
Displayed in browser:
How it should appear:
HTML Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="topBar">
<div id="wrapper">
<!-- top left phone number and icon start -->
<div id="leftTop">
<div id="facebookTop">
<a href="#">
<img src="images/facebook-icon.png" alt="GreatOrlandoDiscounts Become our friend on Facebook!" />
</a>
</div>
<p class="topLeftNumber">Call us at: <mark class="orange">1-800-544-7646</mark></p>
</div>
<!--top left phone number and icon end-->
<!--top right phone number and icon start -->
<div id="rightTop">
<div id="twitterTop">
<img src="images/twitter-icon.png" alt="GreatOrlandoDiscounts Follow us on Twitter" />
</div>
<p class="topRightNumber">Call us at: <mark class="orange">1-800-544-7646</mark></p>
</div>
<!--top left phone number and icon end-->
<!--Left nav bar start-->
<div id="leftNavBar">
<!--left nav dropdown start-->
<div id="navBarLeft">
<div id="dropdownContainerLeft">
<div id="menuLeft">
<ul>
<li class="home"><a href="http://www.ticketmomma.com">HOME</a></li>
<li class="attractions"><a href="http://www.ticketmomma.com/orlando-attractions.html">THEME PARKS</a>
<ul>
<li class="attractions"><a href="http://www.ticketmomma.com/walt-disney-world.htm">Disney</a></li>
<li class="attractions"><a href="http://www.ticketmomma.com/universal-orlando.htm">Universal Studios...
Here is my CSS:
@charset "utf-8";
/* CSS Document */
body {
margin: 0 auto;
background-image:url(../images/body-bg.jpg);
background-repeat:repeat;
}
... (CSS continues)