CODEWITHSUNDEEP
htmlhyperlinkalignment
Andrea P.
Andrea P.

Reputation: 55

How can I correctly align these links?

The Hello bottom on left isn't correct placed, why?

<div style="float: left; width: 45%;text-align:right">
  <a href="lol.html" class="button primary fit" style="width:50%">Hello</a>
  <br/>
  <br/>
  <a href="lol.html" class="button fit" style="width:50%">Hello</a>
</div>
<div style="float: right; width: 45%;text-align:left">
  <a href="lol.html" class="button primary fit" style="width:50%">Hello</a>
  <br/>
  <br/>
  <a href="lol.html" class="button fit" style="width:50%">Hello</a>
</div>

Upvotes: 0

Views: 41

Answers (2)

Jason Aller
Jason Aller

Reputation: 3654

In the left column after the a tag and before the <br/> tag there was a space. Placing the br immediately after the a removed that space. So it was the top left and not the bottom left that wasn't aligned.

This only impacted the left column because it had text-align:right.

<div style="float: left; width: 45%;text-align:right">
  <a href="lol.html" class="button primary fit" style="width:50%">Hello</a><br/>
  <br/>
  <a href="lol.html" class="button fit" style="width:50%">Hello</a>
</div>
<div style="float: right; width: 45%;text-align:left">
  <a href="lol.html" class="button primary fit" style="width:50%">Hello</a>
  <br/>
  <br/>
  <a href="lol.html" class="button fit" style="width:50%">Hello</a>
</div>

Upvotes: 1

Utkarsh Bais
Utkarsh Bais

Reputation: 197

An a tag automatically added a certain margin after the link automatically, that's whats happening here. Your first anchor tag adds a bit of space that moves the next anchor tag out of place. I've added background color for clarity here, plus a negative margin attribute to the first tag. Hope this helps.

<div style="float: left; width: 45%;text-align:right;background-color:bisque;">
  <a href="lol.html" class="button primary fit" style="width:50%;margin-right:-4px;">Hello</a>
  <br />
  <br />
  <a href="lol.html" class="button fit" style="width:50%;">Hello</a>
</div>
<div style="float: right; width: 45%;text-align:left;background-color:burlywood;">
  <a href="lol.html" class="button primary fit" style="width:50%">Hello</a>
  <br />
  <br />
  <a href="lol.html" class="button fit" style="width:50%">Hello</a>
</div>

Upvotes: 0

Related Questions