Positioning a container next to its menu

up vote
6
down vote

favorite

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.

edited Dec 24 '16 at 13:02

200_success

127k15148410

asked Nov 23 '16 at 19:23

user123855

311

bumped to the homepage by Community♦ 7 hours ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

add a comment |

up vote
6
down vote

favorite

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

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.

edited Dec 24 '16 at 13:02

200_success

127k15148410

asked Nov 23 '16 at 19:23

user123855

311

bumped to the homepage by Community♦ 7 hours ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

add a comment |

up vote
6
down vote

favorite

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

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.

edited Dec 24 '16 at 13:02

200_success

127k15148410

asked Nov 23 '16 at 19:23

user123855

311

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

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.

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>

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>

beginner html css layout

edited Dec 24 '16 at 13:02

200_success

127k15148410

asked Nov 23 '16 at 19:23

user123855

311

edited Dec 24 '16 at 13:02

200_success

127k15148410

asked Nov 23 '16 at 19:23

user123855

311

edited Dec 24 '16 at 13:02

200_success

127k15148410

edited Dec 24 '16 at 13:02

200_success

127k15148410

edited Dec 24 '16 at 13:02

200_success

127k15148410

asked Nov 23 '16 at 19:23

user123855

311

asked Nov 23 '16 at 19:23

user123855

311

asked Nov 23 '16 at 19:23

user123855

311

bumped to the homepage by Community♦ 7 hours ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

bumped to the homepage by Community♦ 7 hours ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

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  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  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  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>

answered Nov 24 '16 at 0:21

cFreed

2,463719

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
return StackExchange.using("mathjaxEditing", function () {
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix) {
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
});
});
}, "mathjax-editing");

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "196"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f147920%2fpositioning-a-container-next-to-its-menu%23new-answer', 'question_page');
}
);

Post as a guest

Name

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

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  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  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  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>

answered Nov 24 '16 at 0:21

cFreed

2,463719

add a comment |

up vote
0
down vote

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  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  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  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>

answered Nov 24 '16 at 0:21

cFreed

2,463719

add a comment |

up vote
0
down vote

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  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  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  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>

answered Nov 24 '16 at 0:21

cFreed

2,463719

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  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  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  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>

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>

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>

answered Nov 24 '16 at 0:21

cFreed

2,463719

answered Nov 24 '16 at 0:21

cFreed

2,463719

answered Nov 24 '16 at 0:21

cFreed

2,463719

answered Nov 24 '16 at 0:21

cFreed

2,463719

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Name

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Krdytkyu