I'm encountering an issue aligning a list of links to the right side. The problem arises when the parent div width is increased beyond a certain point.
For instance, with width=700px, everything looks fine:
However, with width=800px, it appears like this:
HTML:
<div class='linksArea' style="width: 800px;">
<div class="boxLeft"></div>
<a href="google.com">Link1</a>
<br>
<a href="google.com">Link2</a>
<br>
<a href="google.com">Link3</a>
<br>
<a href="google.com">Link4</a>
<br>
<a href="google.com">Link5</a>
<br>
<a href="google.com">Link6</a>
</div>
CSS:
.boxLeft {
display: inline-block;
width: 200px;
height: 200px;
background-color: green;
float:left;
}
.linksArea {
text-align: center;
font-size: 1.2em;
font-weight: bold;
}
.linksArea a {
display: block;
background-color: #ccc;
width: 20em;
margin-bottom: 0.5em;
padding-top: .6em;
padding-bottom: .6em;
float:right;
}
Any suggestions on how to resolve this issue?