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.

200_success
145k22 gold badges190 silver badges478 bronze badges
asked Nov 23, 2016 at 19:23
\$\endgroup\$

1 Answer 1

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>

answered Nov 24, 2016 at 0:21
\$\endgroup\$

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.