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;
}