Seeking assistance as a CSS beginner.
Currently working on a project where I have managed to position container_main right next to container_menu, utilizing the remaining screen space by assigning them relative and fixed positions, respectively. container_menu has specific dimensions and a fixed position in the layout.
body {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
/* Navigation bar container: Column */
.container_menu {
height: 100%;
width: 18rem;
/*display: inline-block;*/
position: fixed;
background-color: gray;
}
/* Navigation bar: <ul> Element */
.container_menu .menu {
width: 100%;
padding: 0;
}
.container_menu ul {
list-style-type: none;
}
.container_menu .menu li a{
color: white;
display: block;
padding: 1rem 1.5rem;
background-color: gray;
}
.container_menu .menu li a:hover {
color: white;
background-color: black;
}
.container_main {
height: 100%;
width: 66.31rem;
background-color: black;
position: relative;
float: right;
}
p {
color: white;
background-color: blue;
width: 30rem;
height: 20rem;
border: .7rem solid white;;
padding: 5rem;
margin: 10rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300i,400" rel="stylesheet">
<title>MDN - Mockup</title>
</head>
<body class="wrapper">
<nav class="container_menu">
<ul class="menu">
<li><a href="#"><i class="fa fa-pencil"></i>Teaching Activities</a></li>
<li><a href="#">Web Literacy</a></li>
<li><a href="#">Leadership Opportunities</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Comunity</a></li>
</ul>
</nav>
<main class="container_main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
<<footer></footer>Inquiring about the suitability of the container properties given and seeking advice on any alternative methods to achieve the same layout using different CSS properties.
Appreciate any guidance or suggestions. Thank you.