slicks1 slicks1 - 4 months ago 7
CSS Question

Aligning two anchors side by side

Here is an image of my current progress:

enter image description here

As you can see, the anchors are aligining themselves incorrectly.They should be equidistanct from eachother and aligned symmetrically.

What am I doing incorrectly that I need to be doing to get the two anchor elements to align correctly left to right, having the right anchor pushed up obviously.

I'd prefer to not have to alter the positioning



a.genericbuttonleft {
position: static;
margin: 0px;
//float:left;

}
a.genericbuttonright {
position: static;
margin: 52%;
//float:right;

}
.profileinfo {
position: relative;
background-color: #202020;
box-sizing: border-box;
padding: 20px 20px 25px 20px;
-webkit-overflow-scrolling: touch;
}
.profileinfo h1 {
font: 40px/45px'HelveticaNeue-Light', sans-serif-light;
color: #ffffff;
margin: 0;
}
.profileinfo a {
position: absolute;
right: 30px;
top: 34px;
display: block;
width: 260px;
box-sizing: border-box;
padding: 18px 0 16px 0;
font: 25px/25px'-apple-system', BlinkMacSystemFont, 'HelveticaNeue', Roboto;
text-decoration: none;
text-align: center;
text-transform: uppercase;
color: #ffffff;
background-color: #13cc3a;
border: 0;
border-radius: 5px;
margin: 10px auto;
overflow: hidden;
}

<div class="profileinfo">
<h1><!-- this needs to stay here even though not being used --></h1>
<a class="genericbuttonleft">Search Profiles</a>
<a class="genericbuttonright">Create a Profile</a>
</div>




Answer

Here you go

a.genericbuttonleft {
  margin: 0px;
  left: 0;
}
a.genericbuttonright {
  right: 0;
}
.profileinfo {
  position: relative;
  background-color: #202020;
  box-sizing: border-box;
  padding: 20px 20px 25px 20px;
  -webkit-overflow-scrolling: touch;
}
.profileinfo h1 {
  font: 40px/45px'HelveticaNeue-Light', sans-serif-light;
  color: #ffffff;
  margin: 0;
}
.profileinfo a {
  position: absolute;
  top: 34px;
  display: block;
  width: 260px;
  box-sizing: border-box;
  padding: 18px 0 16px 0;
  font: 25px/25px'-apple-system', BlinkMacSystemFont, 'HelveticaNeue', Roboto;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  color: #ffffff;
  background-color: #13cc3a;
  border: 0;
  border-radius: 5px;
  margin: 10px auto;
  overflow: hidden;
}
<div class="profileinfo">
  <h1><!-- this needs to stay here even though not being used --></h1>
  <a class="genericbuttonleft">Search Profiles</a> 
  <a class="genericbuttonright">Create a Profile</a>
</div>

Comments