CODEWITHSUNDEEP
asp.nethtmlcss
Pankouri
Pankouri

Reputation: 676

Why is my CSS width not working in aspx page?

I am showing my code first

<div class = "buttonsHolder">
    <asp:Button runat = "server" ID = "btnAdd" Text = "Add New" CssClass = "buttonUserControl" />
    <div class = "horizontalSpace"></div>
    <asp:Button runat = "server" ID = "btnEdit" Text = "Edit" CssClass = "buttonUserControl" />
    <div class = "horizontalSpace"></div>
    <asp:Button runat = "server" ID = "btnDelete" Text = "Delete" CssClass = "buttonUserControl" />
</div>

My CSS is 

.buttonsHolder
{
height:25px;
width:465px;
border: solid 1px;
}

.horizontalSpace
{ 
width:20px;
float:left;
}

.buttonUserControl
{
width:105px;
height:24px;
}

But the horizontalSpace is not working, no matter how much width I have given

One more thing to add, I am not good at HTML CSS. &nbsp; can be an option to keep spaces between buttons but what is wrong with my CSS, and how can I fix it without ` ?

Upvotes: 0

Views: 875

Answers (2)

animuson
animuson

Reputation: 54729

The way you have it set up, both of your "horizontal spacers" are being floated all the way to the left. So you're most likely adding 40px of extra space at the left and then your inline buttons are not being spaced apart at all.

However, I would recommend not using a horizontal spacing element. Instead, add a margin to the left or ride side of each button and depending on if you want to support CSS2 or not, remove the margin on the first or last element.

CSS:

.buttons .buttonUserControl
{
margin-right: 20px;
}

HTML:

<div class = "buttons">
<asp:Button runat = "server" ID = "btnAdd" Text = "Add New" CssClass = "buttonUserControl" />
<asp:Button runat = "server" ID = "btnEdit" Text = "Edit" CssClass = "buttonUserControl" />
<asp:Button runat = "server" ID = "btnDelete" Text = "Delete" CssClass = "buttonUserControl" />
</div>

If you don't care about the last element having extra right margin, this will work fine. If you want to remove it, there's two alternatives: 1) To support CSS2, you'll need to add a manual style on the last element to set margin: 0 on it or 2) To just use CSS3, you can add .buttons .buttonUserControl:last-of-type { margin: 0 }.

Upvotes: 2

nycdan
nycdan

Reputation: 2839

if you just want horizontal space between your buttons, put a margin-right on them instead of putting divs between them.

in your .buttons class put

margin-right: 20px;

Upvotes: 2

Related Questions