Buttons to be aligned side by side

Question

I have this code:

<asp:Panel ID="Panel4" runat="server">
                <div style="position:absolute; bottom:578px; left:4%; width: 6%;" >
                    <asp:linkButton id="cmdBackHour" runat="server" CssClass="configurebuttons" Text="< 1 hr" ToolTip="Go back one hour"/>
                    <asp:linkButton id="cmdBackDay" runat="server" CssClass="configurebuttons" Text="< Day" ToolTip="Go back one day" />    
                    <asp:linkButton id="cmdForwardDay" runat="server" CssClass="configurebuttons" Text="Day >" ToolTip="Go forward one day" />
                    <asp:linkButton id="cmdForwardHour" runat="server" CssClass="configurebuttons" Text="1 hr >" ToolTip="Go forward one hour" /> 
                </div>                
            </asp:Panel>

This displays my buttons one below the other. I want these buttons to be displayed side by side.

Answer 1

Add below css property to your buttons.

float:left;
display:inline-block;

This will help.

Use one common class to all buttons to apply this.

Eg.

.btn {
    float:left;
    display:inline-block;
}