How do I align multiple buttons by using all the space in a div?

Question

0.00/5 (No votes)

See more:

I want to place multiple buttons in a div so that they use all the space of the div and be equally spaced as well.Same thing I want to implement for text in another div as well.
The UI is:

XML

<asp:Content ID="Content5" ContentPlaceHolderID="CPH4" runat="server">
    <div id="divHeading" class="font2" style="background-color: white; margin-left: auto"> &nbsp; Main Operating Centers
    </div>
    <div style="background-color: white;"><br /></div>
    <div id="divOptions" style="flex-item-align: center; background-color: white; ">
        &nbsp;
        <telerik:RadButton ID="RadButton1" runat="server" Text="Roma"></telerik:RadButton> &nbsp;
        <telerik:RadButton ID="RadButton2" runat="server" Text="Paris"></telerik:RadButton> &nbsp;
        <telerik:RadButton ID="RadButton3" runat="server" Text="Kualalampur"></telerik:RadButton> &nbsp;
        <telerik:RadButton ID="RadButton4" runat="server" Text="Chennai"></telerik:RadButton> &nbsp;
        <telerik:RadButton ID="RadButton5" runat="server" Text="Abu Dhabi"></telerik:RadButton> &nbsp;
        <telerik:RadButton ID="RadButton6" runat="server" Text="Houston"></telerik:RadButton>
    </div>
    <div style="background-color: white;"><br /></div>
</asp:Content>

The css is:

CSS

.font2 
{
    font-family :Calibri;
    font-size :medium;
    font-weight :bold;
    overflow: visible;
    border-color:gainsboro;
}

Please suggest how to achieve this.

Posted 2-May-14 1:19am

Sagarika Chaturvedi

Updated 2-May-14 2:34am

v6

Add a Solution

Comments

altaf008bd 2-May-14 7:53am

Hi, question: all the buttons width will be same?

Sagarika Chaturvedi 2-May-14 7:58am

yes.. and also, i want to implement the same thing in another div with text also.

DamithSL 2-May-14 8:10am

can you update the question with your html ( div html)?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

altaf008bd · Answer 1 · 2014-05-02T02:20:00

I think, you can use percentage width (instead of fixed width) for each of the div. For example: say there will be 4 buttons in a div. so, each of the div (which contains the button) width will be 25%.

HTML

<style type="text/css">
.div-parent
{
width:100%;
}
.div-button
{
float:left;
width:25%;
}
.div-button button
{
width: 100px;
}
</style>

The html will be: