Fix Overlapping DIV HTML/CSS

BEFORE

Cascade Style Sheet enhances the appearance of a website. This is commonly known and understood
by many website designers. Your ability to play around with CSS puts you ahead of someone who only knows HTML with the knowledge of CSS. This is principally based on the fact that only HTML does not necessary enhance the appearance of a website neither does it add beauty to it.

Am not gonna bore you with lot of grammar on what is obtainable or not with CSS. Our focus today is to see how we can uniformly work with DIV on our website project where the height of one does not overlap the DIV beneath it. Most people face this challenge while working a blog project or something of that nature where you cannot predetermine the amount of content in it (whether text or images) that will go in that portion or DIV meant for it.

Examine the image above carefully. We have a total of six(6) DIVs. Namely; BANNER,TOP NAV, SIDE NAV, CONTENT, FOOTER and WRAPPER. WRAPPER seems invisible. You can see it with your Third eye. These (excluding WRAPPER) are all individual DIVs. For them to be held together, another DIV is required. I term that DIV wrapper.

The DIV called CONTENT is meant to adjust automatically based on the length of the content in it. Upon expansion, it overlaps FOOTER. As a result of this, part of the content of this will be hidden or covered by CONTENT div. The principal reason for this problem is because two DIVs were created in the row before FOOTER and are not of equal length. CONTENT div is longer than SIDE NAV
div. to overcome this problem; you will have to create another div immediately before FOOTER with the following CSS properties.

<div style="background: #fec232; clear: both; height: 2px; width: 100%;">
</div>

AFTER

What this thing does is this; we;ve created a new div and cause it to take absolute width (i.e run from left to right taking the entire width). Then we gave it a height of 2px along a background color so that it will be visible. We went further to tell the browser to clear both left and right if there is any DIV. With this the problem is declared solve.