top of div at same level as one preceding in document flow

Question

I have a div with an id of “main” that wraps 2 other divs. Before the “main” div is another div with an id of “heading.” “Main” is showing its top on the same line as “heading” when I inspect element. I want to create some simple borders between “main” and “heading” delineating its content in relation to the that of "heading." Why is “main” on the same level as “heading” when It follows it in the document flow? Thanks.

#heading {
    width: 960px;
    }
#colD {
    width: 320px;
    float: left;
    }
#colE {
    width: 30px;
    float: left;
    }
#colF {
    width: 250px;
    float: left;
    text-align: center;
    letter-spacing:.1em;
    font-weight: bold;
    font-variant: normal;
    font-size: 1.2em;
    }
#colG {
    width: 10px;  
    float: left;
    }
#colH {
    width: 350px;
    float: left;
    }
.floral-icon {
    vertical-align: middle;
    }
div#colD {
    text-indent: -999px;
    }
div#colF {
   font-family: "amador";       
    }
div#colG img {
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}
div#heading p {
    font-size: 72px;
    text-align: center;
    margin: 72px 0;
    letter-spacing: 2px;
    }
.img-zoom {
    width: 310px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    }
.transition {
    -webkit-transform: scale(2.5); 
    -moz-transform: scale(2.5);
    -o-transform: scale(2.5);
    transform: scale(2.5);
    }  
div.text {
    width: 620px;
    float: left;
    margin-right: 5px;
    padding: 20px;
    }
div.image {
    width: 300px;  
    height: 1800px;
    float: right;
    padding-top: 0px;
    padding-bottom: 20px;
    }
div.image p:first-of-type {
    font-size: 1.5em;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    border-top: 1px solid #000 !important;
    border-bottom: 1px solid #000 !important;
}


html

<header>
    <div id="colA"><a href="index.html" title="link to same page in same directory">Home</a></div>
    <div id="colB">Barton Lewis's Genealogy Pages</div>
    <div id="colC"><a href="DNA.html" title="link to same page in same directory">DNA</a></div>
</header>   
    <div id="heading">
    <div id="colD">empty</div>
    <div id="colE"><p><img class="floral-icon" src="_images/pg_p_lewis_icon.png" alt="floral icon" width="32" height="32"></p></div>
    <div id="colF"><p>Lewis</p></div>
    <div id="colG"><p><img class="floral-icon" src="_images/pg_p_lewis_icon.png" alt="floral icon" width="32" height="32"></p></div>
    <div id="colH"></div>
    </div>
<div id="main">
    <div class="text">
    <p>text</p>
    <p>text</p>
    </div>
<div class="image">
    <p>Image Gallery</p>
    <p>Center image on page and hover to enlarge.</p>
    <p><img class="img-zoom" src="_images/RL_LEWIS_Alex_KCC_1197_Sur_1.jpg" class="img-thumbnail" alt="lewis land grant" width="259" height="387"></p>    
    <p><img class="img-zoom" src="_images/RL_LEWIS_Alex_KCC_1197_Sur_Assign_to_Benj_P_Campbell.jpg" class="img-thumbnail" alt="lewis land grant" width="259" height="387"></p>
    </div>
    </div>

Answer 1

Your parent containers #main and #heading appear on the same line because they are collapsing.

Normally a div will expand with it's contents when it's display is set to block however, when it's children are set to float it collapses as floating an element causes it to be removed from the normal flow.

If float is required you can use several workarounds, this has already been answered quite in depth here. Or you can simply use display: inline-block; for inline elements.

I recommend reading up on the basics at w3schools. Let us know how you get on and if this answer helped, please don't forget to mark a correct answer if it did help.

Thanks