Whenever I add a heading tag or paragraph tag within my div, it causes the content to drop down the screen significantly. I am unsure of the cause and feel a bit overwhelmed by it. I attempted to wrap the <h1> tag in a <div>, as shown below:
<div class="left">
<div>
<p>hello</p>
</div>
</div>
Unfortunately, this did not solve the issue, so any guidance would be greatly appreciated.
Below is a simplified version of the code, or you can view it on jsFiddle:
View the simplified version of the problem on jsFiddle
index.html
<div class="wrapper">
<div class="header">
<div class="wrap"> <span class="img_1"><img src="imgs/sjplogo.png" id="sjplogo"/></span>
<h2>Website Service</h2>
<span class="img_2"><img src="imgs/sslogo.png" id="sslogo"/></span>
</div>
<div class="maincontent">
<div class="maincontentWrapper">
<div class="topWrapper">
<div class="left"><p>hello</p></div>
<div class="center"></div>
<div class="right"></div>
</div>
<!--End topWrapper-->
<div class="bottomWrapper">
<div class="leftBottom"></div>
<div class="rightBottom"></div>
</div>
<!--End bottomWrapper-->
</div>
<!-- End maincontentWrapper-->
</div>
<footer></footer>
</div>
css/style.css
@charset"utf-8";
/* CSS Document */
/********************************
* CSS Reset *
*********************************/
... (CSS styles omitted for brevity) ...