CODEWITHSUNDEEP
cssalignment
dottedquad
dottedquad

Reputation: 1391

CSS: how do I fix my hyperlink alignment issue?

I have two links: shopper and store. Both of these links are in there own separate left and right floats. The Store link is supposed to be in a right float, but it snaps out of its div when adding a border style to the left float. How do I get it back into place? Please have a look at http://jsfiddle.net/JuCKU/ for an example.

I completely forgot to update jfiddle with the new code. http://jsfiddle.net/JuCKU/3/

firefox is having the alignment issue while google chrome seems to render the layout correctly.

Upvotes: 0

Views: 314

Answers (5)

ajcw
ajcw

Reputation: 23804

Adding the border increases the overall size of the boxes to 50%+1px, so together their combined width is greater than 100% and something's gotta give.

You can use the CSS3 property box-sizing:border-box to incorporate the border into the total 50% width, or more specifically -moz-box-sizing in Firefox, -webkit-box-sizing in Chrome/Safari and simply box-sizing in Opera. Unfortunately IE doesn't yet support this.

So add this to your code.

#shopper, #store {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

More info - http://www.css3.info/preview/box-sizing/

As mentioned by others the bulletproof solution across all browsers is to reduce the width of your boxes to fractionally less than 50%.

Upvotes: 1

sandeep
sandeep

Reputation: 92853

simple give margin-right:-1px in your shopper div 

#shopper
{
    float: left;
    border-right: 1px solid #ccc;
    margin-right:-1px;
}

Check this http://jsfiddle.net/JuCKU/6/

OR

you can use css3 box-sizing property for this but it's work till IE8 & above.

Check this http://jsfiddle.net/JuCKU/7/

Upvotes: 1

j08691
j08691

Reputation: 208012

Drop the width from 50% to 49%. Since you have a border, it takes up space and by giving each div a width of 50%, the total is a bit too wide and the second div pop down a bit. Or get rid of the border.

jsFiddle Example

Change

#shopper, #store
{
    width: 50%;
    text-align: center;
}

To:

#shopper, #store
{
    width: 49%;
    text-align: center;
}

Upvotes: 1

punkrockbuddyholly
punkrockbuddyholly

Reputation: 9794

It's a rounding issue. It's not a rounding issue, 50% + 50% + 1px border is more than 100%. Making the width slightly less than 50% is a quick fix.

Change this:

#shopper, #store
{
    width: 50%;
    text-align: center;
}

for this:

#shopper, #store
{
    width: 49.9999%;
    text-align: center;
}

http://jsfiddle.net/JuCKU/4/

Upvotes: 1

Ajeet Sinha
Ajeet Sinha

Reputation: 2345

Give the divs some widths

see http://jsfiddle.net/JuCKU/1/

Upvotes: 0

Related Questions