CODEWITHSUNDEEP
htmlcsswidth
Pacha
Pacha

Reputation: 1526

Always have width on floating elements without text

Consider this:

<style>
a
{
    float:left;
    width:200px;
    text-align:center;
}
</style>
<div>
    <a>First</a>
    <a>Second</a>
    <a>Third</a>
</div>

This works perfectly, and each <a> has the correct width. But when I remove the text from one of those <a>, the width gets lost, and instead of having 600px width, I have 400px.

What should I do to have 3 <a> with fixed width and without text?

I use jQuery a lot in my application and the text in those anchors changes.

I found a way of solving this by replacing the text with \xA0, but I can still click it, and I want it to be disabled.

Upvotes: 0

Views: 56

Answers (4)

Bazinga777
Bazinga777

Reputation: 5281

You can use display:block for the style tag. Here is my take on it. http://jsfiddle.net/DkL6F/

             <div>
                <a style="background:#FF433F;">&nbsp;&nbsp;</a>
                <a style="background:#F1F33F;">&nbsp;&nbsp;</a>
                   <a style="background:#F1B33F;">&nbsp;&nbsp;</a>
            </div>

                  a
            {
                 float:left;
                width:200px;
                 text-align:center;
           display:block;

                }

Upvotes: 0

Kimtho6
Kimtho6

Reputation: 6184

You just need to add display:block;

a tags is by default display:inline;

Upvotes: 0

Aljullu
Aljullu

Reputation: 444

You should apply display: inline-block to those anchors to prevent them to occupy less space.

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128791

It's because the element ends up with no height without any content. The fix would be to specify a height:

a {
    float:left;
    width:200px;
    text-align:center;
    height:20px;
}

Upvotes: 1

Related Questions