Moderator Hat On.
I allowed this message, because it is a good continuation of an earlier thread about use of HTML in ADF. Abolila - we're not going to answer you in specific terms - that would be a topic for the OTN forum. But the general methodology for getting the layout and behavior you want, and whether HTML and CSS is a good idea is appropriate here.
Moderator Hat Off.
My two cents:
As I said in the earlier thread, I've been experimenting with HTML inside Facelets pages - which is permitted with Facelets. It works well to a point, but ADF Faces components still do not play nice with others. I used HTML in an ADF template, and it looks exactly as it should. But when I create a page that uses the template, some ADF Faces components work and others do not. The biggest offender is af:table. When you put a table inside a template made with Facelets and HTML, the columns do not align with the column headers. The problem is probably that to enable some of the cool capabilities of an af:table, ADF Faces adds some JavaScript and CSS of its own that expects a DOM that my HTML spoils. I'm going to try some non-ADF components (trinidad or base JSF).
But for now, I will have to say what I think Oracle would say - JSF is NOT HTML. Your ADF Faces and other compatible JSF components have lots of capabilities and can do many kinds of layout. If you can do it with JSF, don't bother with HTML. As for CSS - that is what the skinning feature of ADF Faces is for. You can control the look and feel of the components, and you can add your own CSS selectors to the skin.