Have I taken something out of flow?

Hi -

I was wondering if anyone could tell me why this bit of text (copyarea) would be rendered after the bottom border?

<div class="copyarea">

<p> The National Council for Eye Health predicts a sharp rise in eye-related disorders in 2010 and 2011. Part of this is due to the growing number of Americans with diabetes. Other disorders include glaucoma and macular degeneration. A yearly check for such disorders is a healthy step towards optimal vision for life. </p>
</div>

<div id="bottomborder">
</div>

--------------------------

.copyarea {
	font-family: Arial, sans-serif;
	font-size: 12px;
	width: 500px;
	float: left;
}

#bottomborder {
	width: 1000px;
	height: 5px;
	margin-left: auto;
	margin-right: auto;
	background-color: black;
}

Code (markup):

 

what are you exactly trying to ask , please clear it

 

The bottomborder class is just a thick black horizontal line. I want the text that's in the id copyarea to be above the line rather than below it.

I'm not using a border declaration because I was hoping to piece together other parts of the site above the line. I'm just starting out, so I'm sure that there's a better way to lay out the site, but nothing teaches quite like trial and error.

 

Easiest way is to remove float:left from .copyarea.

 

Thank you!

 

i am unable to understand your question but the code you have quoted, will produce a text with having line of 5px width below, actually it will not a line it is a div box of 5px height