Hey there, I'm currently working on creating a menu with both side and top elements. However, I've encountered an issue while trying to align the icons and names to the right using position:absolute and right:0px. The problem arises because my body has a margin-left: 280px.
let menuToggleButton = document.getElementById('menu_toggle_button');
let side_menu = document.getElementById('side_menu');
let body = document.getElementById('body');
menuToggleButton.addEventListener('click', function() {
side_menu.classList.toggle('resize-side-menu');
body.classList.toggle('resize-body');
});*{
margin: 0px;
padding: 0px;
}
body{
display: flex;
}
.side-menu{
position: fixed;
display: inline-flex;
background: #ff000061;
width: 280px;
height: 100vh;
transition: .5s;
}
.resize-side-menu{
width: 50px;
transition: .5s;
}
.body{
display: inline-flex;
width: 100%;
height: 60px;
margin-left: 280px;
background: blue;
height: 2000px;
transition: .5s;
}
.resize-body{
margin-left: 50px;
transition: .5s;
}
.body .content-body{
display: block;
width: 100%;
height: 100%;
}
.body .content-body .header{
width: 100%;
height: 50px;
display: block;
position: fixed;
}
.content-items-header{
display: flex;
align-items: center;
background: brown;
position: relative;
height: 50px;
}
.body .content-body .header .content-items-header .content-search-input{
background: white;
color: rgb(0, 0, 0);
border: 2px solid blue;
}
.body .content-body .header .content-items-header .icons-content{
position:absolute;
right:0px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css">
</head>
<body>
<div class="side-menu" id="side_menu">
</div>
<div class="body" id="body">
<div class="content-body">
<div class="header">
<div class="content-items-header">
<button class="fad fa-bars" id="menu_toggle_button">open</button>
<div class="content-search-input">
<input type="text" class="search" id="search">
<i class="fad fa-search"></i>
</div>
<div class="icons-content">
<i class="fas fa-bell"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-cog"></i>
<img src="brain.jpg" alt="" height="35px" width="35px">
<span>Aldahir Ruiz Valdez</span>
</div>
</div>
</div>
<div class="workspace">
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>I am looking for a solution where I can keep them aligned to the right without overflowing off the screen