7
\$\begingroup\$

I'm a beginner in CSS and need help with a suggestion.

I'm working on a project, in which I managed to position container_main right next to container_menu giving the remaining dimension of the screen, giving it relative position and floating it to the right. container_menu has a dimension and a fixed position specified.

body {
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

/*Contenedor de la barra de navegacion: Columna*/
.container_menu {
  height: 100%;
  width: 18rem;
  /*display: inline-block;*/
  position: fixed;
  background-color: gray;
}

/*Barra de navelación: Elemento <ul>*/
.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>

</body>
</html>

I would like to know if the characteristics I gave the containers are ideal, or if there is a better way to get the same result using other properties.

\$\endgroup\$
1
\$\begingroup\$

I have trouble to realize what were your initial whishes, since the current choices lead to some inconveniences (as it already appears in the reduced "snippet box").

Here is what I can|can't understand:

  • You want to keep menu always visible and located at the same place regardless how user scrolls.
    So using container_menu {position: fixed;} is ok.
  • You want to have main container occuping the rightmost place, in front of container_menu and starting at the top of the window.
    So using container_main {float: right;} is ok.
  • But why did you also set its postion to relative? Without adding some of top|left|right|bottom properties it changes nothing to its own location. In the other hand, it might be useful to constraint its <p> childs if they had for example fixed position but they don't.
    So using container_main {position: relative;} is useless.
  • Since you set fixed width values for container_main and its <p> children, depending on the window width it may result in a (likely) unwanted layout: as soon as the window is small enough, container_main partially or totall overwrites container_menu.
    So regarding only this point (but see also below) you should add container_menu {z-index: 1;} (or any other convenient value, depending on other elements not currently showed).
  • For the same reason, if the window width is smaller than the fixed <p> children, their content becomes cropped.
    So you had better using a totally different technique, such as setting container_menu postion to fixed, with a left margin equal to container_menuwidth, and using percentage for container_main width

Here is an example using the above technique:

body {
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

/*Contenedor de la barra de navegacion: Columna*/
.container_menu {
  height: 100%;
  width: 18rem;
  /*display: inline-block;*/
  position: fixed;
  background-color: gray;
}

/*Barra de navelación: Elemento <ul>*/
.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%;
  margin-left: 18rem;
  background-color: black;
  position: fixed;
  overflow-y: scroll;
}

p {
  color: white;
  background-color: blue;
  width: 60%;
  border: .7rem solid white;;
  padding: 5rem;
  margin: 10rem auto;
}
<!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>

</body>
</html>

|improve this answer|||||
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.