Question posted in 
enter code hereI try to clone twitter news feed.in profile section try to recreate edit profile button: .editprofile , but unfortunately for some reason I cant move my element right , in the end of the box , under cover photo.
I used display:flex and flex-direction:column , beside that when I am using align-items:end nothing changes.
html code:
<body>
<div class="container">
<div class="box">
<div class="nav-box">
<div class="nav-grid">
<ion-icon class="twitter-logo" name="logo-twitter"></ion-icon>
<nav class="main-nav">
<ul class="main-nav-list">
<li>
<ion-icon class="nav-icon" name="home-outline"></ion-icon
><a class="main-nav-link" href="#">Home</a>
</li>
<li>
<ion-icon class="nav-icon" name="earth-outline"></ion-icon
><a class="main-nav-link" href="#">Explore</a>
</li>
<li>
<ion-icon
class="nav-icon"
name="notifications-outline"
></ion-icon
><a class="main-nav-link" href="#">Notifications</a>
</li>
<li>
<ion-icon class="nav-icon" name="mail-open-outline"></ion-icon
><a class="main-nav-link" href="#">Messages</a>
</li>
<li>
<ion-icon class="nav-icon" name="bookmark-outline"></ion-icon
><a class="main-nav-link" href="#">Bookmarks</a>
</li>
<li>
<ion-icon
class="nav-icon"
name="document-text-outline"
></ion-icon
><a class="main-nav-link" href="#">Lists</a>
</li>
<li>
<ion-icon class="nav-icon" name="person-outline"></ion-icon
><a class="main-nav-link" href="#">Profile</a>
</li>
<li>
<ion-icon
class="nav-icon"
name="ellipsis-horizontal-circle-outline"
></ion-icon
><a class="main-nav-link" href="#">More</a>
</li>
</ul>
</nav>
<a class="btn-Tweet" href="#">Tweet</a>
</div>
</div>
<div class="main-box">
<div class="name-attributes">
<ion-icon
class="main-box-arrow"
name="arrow-back-outline"
></ion-icon>
<div class="name-attribute">
<p class="main-box-name">James Holland</p>
<p class="main-box-tweets">1,789 Tweets</p>
</div>
</div>
<div class="main-box-profile">
<img
class="profile-cover"
src="subscription1.png"
ref="profile cover photo"
/>
<img class="profile-img" src="ben.jpg" ref="profile photo" />
<div class="main-edit-profile">
<a class="edit-profile" href="#">Edit profile</a>
</div>
</div>
</div>
<div class="side-box">asdfg</div>
</div>
</div>
</body>
css code:
.main-box {
border-width: thin;
border-left: solid 1px #cfcfcf;
}
.main-box-name {
color: #fff;
font-size: 1.5rem;
font-weight: 600;
}
.main-box-tweets {
font-size: 1rem;
color: #777;
}
.main-box-arrow {
color: #fff;
height: 1.5rem;
width: 1.5rem;
margin-left: 1rem;
font-weight: 500;
}
.main-box-arrow:hover {
color: #0db924;
}
.name-attributes {
display: flex;
gap: 1rem;
align-items: center;
}
.main-box .main-box-profile {
margin-top: 0.5rem;
display: flex;
flex-direction: column;
}
.profile-cover {
position: relative;
width: 100%;
height: 30vh;
}
.profile-img {
position: absolute;
transform: translate(10%, 75%);
border-radius: 100%;
border: 3px solid black;
}
.main-box-profile .edit-profile {
position: absolute;
text-decoration: none;
align-items: end;
color: #fff;
box-shadow: inset 0 0 0 1px #fff;
padding: 1rem 2rem;
}
2
Answers
Try this.and no need of
position:absolutefor .main-box-profile .edit-profile classIs this what you are trying to achieve.I had added border to the button.