More Featured Categories- How to set Style.css

[Lia Gk]

Hello,
i added more featured categories in home.php. Now, i have to add some code in Style.css.
The code in Style.css for "homepageleft2" and "homepageleft2" works fine, but when i add more , like "homepageleft3" etc. , it "breaks".

Can anyone tell me how to set correctly the Style.css code?
This is the code at the moment, but it's definetely wrong [because i didn't know where to add "homepageleft3" and "homepageright3" :) ] :

/************************************************
*	Homepage 		    	                    * 
************************************************/
#homepage {
	float: left;
	width: 700px;
	margin: 0px;
	padding: 0px;
	}
	
#homepage p {
	margin: 0px;
	padding: 0px;
	}

#homepage p img {
	border: none;
    float: left;
	margin: 0px;
	}
	
#homepage ul {
	list-style-type: square;
	margin: 0px;
	padding: 0px 0px 15px 0px;
	}
	
#homepage ul li {
	list-style-type: square;
	margin: 0px;
	padding: 0px;
	}

.hpdate {
	font-size: 11px;
	margin: 0px;
	padding: 0px;
	}
	
#homepagetop {
	background: #FFFFFF url(images/homepagetop.gif) top no-repeat;
	float: left;
	width: 700px;
	margin: 0px 0px 10px 0px;
	padding: 0px;
	border: 1px solid #DDDDDD;
	}
	
#homepagetop p {
	font-size: 16px;
	margin: 0px;
	padding: 0px 0px 0px 10px;
	}
	
.featuredtop {
	float: left;
	margin: 0px;
	padding: 10px;
	display: inline;
	}
	
.featuredtop img {
	border: none;
	margin: 0px;
	}
	
#homepagebottom {
	background: #FFFFFF url(images/homepagetop.gif) top no-repeat;
	float: left;
	width: 700px;
	margin: 10px 0px 10px 0px;
	padding: 0px;
	border: 1px solid #DDDDDD;
	}
	
#homepagebottom p {
	font-size: 12px;
	margin: 0px;
	padding: 0px;
	}
	
.hpbottom {
	float: left;
	width: 700px;
	margin: 0px;
	padding: 10px;
	display: inline;
	}
	
.hpbottom img {
	border: none;
	margin: 0px;
	}

	
#homepageleft {
	float: left;
	width: 320px;
	margin: 0px;
	padding: 0px;
	}

.hpfeatured {
	background: #FFFFFF url(images/featuredtop.gif) top no-repeat;
	float: left;
	width: 320px;
	margin: 0px;
	padding: 10px 10px 10px 10px;
	border: 1px solid #DDDDDD;
	}
	
.hpfeatured img {
	border: none;
	margin: 0px;
	}
	
#homepageright {
	float: right;
	width: 320px;
	margin: 0px;
	padding: 0px;
	}
	
#homepagebottom {
	background: #FFFFFF url(images/homepagetop.gif) top no-repeat;
	float: left;
	width: 700px;
	margin: 10px 0px 10px 0px;
	padding: 0px;
	border: 1px solid #DDDDDD;
	}


#homepageleft {
	float: left;
	width: 320px;
	margin: 0px;
	padding: 0px;
	}

.hpfeatured {
	background: #FFFFFF url(images/featuredtop.gif) top no-repeat;
	float: left;
	width: 320px;
	margin: 0px;
	padding: 10px 10px 10px 10px;
	border: 1px solid #DDDDDD;
	}
	
.hpfeatured img {
	border: none;
	margin: 0px;
	}
	
#homepageright {
	float: right;
	width: 320px;
	margin: 0px;
	padding: 0px;
	}	


#homepageleft2 {
       float: left;
       width: 320px;
       margin: 0px;
       padding: 0px;
       padding-top:10px;
       padding-bottom:10px;
       }

#homepageright2 {
       float: right;
       width: 320px;
       margin: 0px;
       padding: 0px;
       padding-top:10px;
       padding-bottom:10px;
       }
#homepageleft3 {
       float: left;
       width: 320px;
       margin: 0px;
       padding: 0px;
       padding-top:10px;
       padding-bottom:10px;
       }

#homepageright3 {
       float: right;
       width: 320px;
       margin: 0px;
       padding: 0px;
       padding-top:10px;
       padding-bottom:10px;
       }

Please, help me. I have stuck in this field for a long time :(