Border Help

[bam720]

I am creating a page that I want to have a border around the entire contents.

+--------------------------+
|           *************  |
| +--+  +----------------+ |
| |  |  |                | |
| |  |  |                | |
| |  |  |                | |
| |  |  |                | |
| |  |  |                | |
| +--+  +----------------+ |
|  ************            |
+--------------------------+

I am stuck on the outer border. Whenever I try to float any of the inner elements the border collapses on itself.

/* top stars in pic*/
#top{width:80%;;margin-right:20px;float:right}

#left{width:20%;height:auto;margin-left:20px;float:left}

/* Large Area in pic */
/* generated from DB */
#mainImg {width:75%;height:auto;float:right;text-align:center;color:#FFFFFF;font-size:11px;font-family:Arial, Helvetica, sans-serif;}

/*bottom stars in pic */
#bottom{width:100% margin:0 20px; float:left;clear:both;}

Thanks for the help. (the page is not on the a public server other wise I'd share that. If you need full HTML CSS I can provide most of it)

 

[bam720]

sorry just realized I forgot more relavant code:

#border {
	width:720px;height:auto;
	border:1px solid #4F4F4F;
	margin-top:40px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	clear:both;
}

======================

html page...

<div id="border">
  <div id="#top"></div>
  <div id="#left"></div>
  <div id="#mainImg"></div>
  <div id="#bottom"></div>
</div>

 

[bam720]

I un-floated the bottom id and its all good now.

 

[Vragabond]

I advise you also read up on clearing floats.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]