Same DIV twice different floats? - class

Question

I'm trying to clean up my code a bit by not having so many div id's. As I understand you're not supposed to use the same div id more than once.
The HTML:
<div id="sides" class="alignLeft"></div>
<div id="sides" class="alignRight"></div>
<div id="center"></div><!--center-->
The CSS:
.alignLeft {
float: left;
}
.alignRight {
float: right;
}
#sides {
width: 350px;
height: 45px;
}
#center {
width: 350px;
height:350px;
}
As you can see I have used the #sides div twice in the html but applied different float classes (left, right). Even though the code seems to work, I know it's incorrect. What would be the correct way to use the same div with different floats?

Answer 1

Yes id selectors are meant to be used only once per page. You could refactor your code to look like this.
HTML
<div class="sides alignLeft"></div>
<div class="sides alignRight"></div>
<div id="center"></div><!--center-->
CSS
.alignLeft {
float: left;
}
.alignRight {
float: right;
{
.sides {
width: 350px;
height: 45px;
}
#center {
width: 350px;
height:350px;
}

Answer 2

You can assign multiple classes to one element, so you can use sides as a class instead of an id:
The HTML:
<div class="sides alignLeft"></div>
<div class="sides alignRight"></div>
<div id="center"></div><!--center-->
The CSS:
.alignLeft {
float: left;
{
.alignRight {
float: right;
{
.sides {
width: 350px;
height: 45px;
}
#center {
width: 350px;
height:350px;
{