Horizontal and Vertical buttons

These are the W3C examples for button groups that are horizontal and vertical. The button-group is a useful construct when formatting a page or menu. The positioning, the behaviour and appearance is determined by a class definition and the CSS takes care of the clearing of floats and display

The CSS can be seen by looking at the source.

Horizontal Buttons

The horizontal buttons are floated left, but so is the container that contains them. As such they will display side-by-side anyway.

I can also float them right.

In both cases you need the clearfix on the btn-grouph here.

I added a margin-right: 10px; so I don't really have to worry about double borders. As they are they look like shadows

Vertical Buttons

The vertical buttons need the display: block; to appear on new lines.

I could toggle between the two, as in the responsive menus but I think that I have covered this already.