0
I’m creating a layout in which the main menus of the site are on the left, and the right is the content of the site, open the whole page to get better to view:
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
font-family: arial;
}
nav {
width: 300px;
height: 100%;
border: 1px solid black;
background: silver;
}
ul {
margin: 0;
padding: 0;
list-style: none;
margin-top: 50px;
}
a {
display: block;
text-decoration: none;
background: black;
margin: 10px;
padding: 10px;
color: white;
}
nav, section {
float: left;
}
section {
width: 900px;
padding: 50px;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</nav>
<section>
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum quis erat sed egestas. Fusce magna nisl, blandit eget lacinia vel, tincidunt ac ex. Aenean quis blandit augue. Nulla suscipit lorem sagittis, gravida nisl non, luctus sapien. In hac habitasse platea dictumst. Aenean non lorem dui. Nunc pulvinar vehicula lacus, et feugiat eros lobortis eget. In malesuada eget eros id bibendum. Vestibulum eu interdum tellus, vel blandit eros. Vivamus dignissim augue ac posuere luctus.
Praesent id ligula ex. Phasellus sit amet pulvinar leo, quis varius dolor. Donec consequat massa nec nibh varius, ac tincidunt nibh sollicitudin. Praesent finibus nunc odio, vitae mattis orci laoreet quis. Pellentesque pharetra sagittis nunc, eget iaculis leo dictum eu. Fusce eget imperdiet libero. Phasellus ex lectus, varius vel metus a, imperdiet cursus augue. Nunc cursus ipsum in turpis interdum euismod. Aliquam vitae hendrerit mauris, ac euismod elit. Ut lorem velit, cursus a nulla at, fermentum porttitor ipsum. Nunc laoreet scelerisque vestibulum. Vestibulum iaculis feugiat tortor, eget varius metus sodales non. Aenean eu augue at sem bibendum feugiat. Nam pulvinar leo a lorem ultrices, a mattis metus luctus. Nunc sed scelerisque neque.
Aenean ac ante nunc. In mattis nibh et felis ornare rutrum. Nullam interdum faucibus metus eu suscipit. Aenean vel nibh diam. Vivamus eu ex sit amet enim sodales vehicula nec at nisi. Praesent dapibus sed lectus non vehicula. In lacinia mi sagittis scelerisque tincidunt. Aliquam ante eros, elementum eu volutpat in, imperdiet eget metus.
Aliquam volutpat venenatis purus sed egestas. Fusce accumsan mattis sapien, sed sagittis lorem vehicula ac. In interdum mi non arcu pharetra, eu aliquet turpis suscipit. Nullam venenatis neque nec nisi eleifend rhoncus. Curabitur tristique placerat blandit. Ut interdum tortor ut luctus finibus. Morbi eu ultricies dolor. Integer nec egestas risus, eget elementum purus. Aenean nec lacinia est, et egestas velit. Cras ipsum metus, fermentum vitae facilisis in, suscipit vel nisl. Mauris congue sem sit amet efficitur vehicula. Praesent euismod, libero ut tempus suscipit, leo nunc condimentum eros, vitae finibus nibh leo et diam. Morbi scelerisque, massa eget luctus sagittis, justo metus pretium purus, id sodales est tellus finibus magna. Quisque vel eros a eros malesuada placerat et ut lorem.
Nunc quis diam eget nisl aliquam varius in sagittis sem. Pellentesque viverra hendrerit metus sit amet mattis. Sed ut fringilla lacus. Phasellus ultrices volutpat ante a commodo. Etiam eget porttitor leo. Nulla viverra id libero ut fermentum. Sed eget ullamcorper est. Fusce sem ex, blandit porta sem id, suscipit venenatis urna. Phasellus quis tellus non sem convallis eleifend nec non elit. Suspendisse dictum rutrum porttitor.
</p>
</section>
</body>
</html>What happens is that I need the menu to stay fixed to the left side of the screen, but what happens is that when I define the position: fixed in the nav the content gets fixed, but the content on the right is played to below the menus, to create a scroll I set the section with height: 1400px.
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
font-family: arial;
}
nav {
width: 300px;
height: 100%;
border: 1px solid black;
background: silver;
position: fixed;
}
ul {
margin: 0;
padding: 0;
list-style: none;
margin-top: 50px;
}
a {
display: block;
text-decoration: none;
background: black;
margin: 10px;
padding: 10px;
color: white;
}
nav, section {
float: left;
}
section {
width: 900px;
height: 1400px;
padding: 50px;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</nav>
<section>
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum quis erat sed egestas. Fusce magna nisl, blandit eget lacinia vel, tincidunt ac ex. Aenean quis blandit augue. Nulla suscipit lorem sagittis, gravida nisl non, luctus sapien. In hac habitasse platea dictumst. Aenean non lorem dui. Nunc pulvinar vehicula lacus, et feugiat eros lobortis eget. In malesuada eget eros id bibendum. Vestibulum eu interdum tellus, vel blandit eros. Vivamus dignissim augue ac posuere luctus.
Praesent id ligula ex. Phasellus sit amet pulvinar leo, quis varius dolor. Donec consequat massa nec nibh varius, ac tincidunt nibh sollicitudin. Praesent finibus nunc odio, vitae mattis orci laoreet quis. Pellentesque pharetra sagittis nunc, eget iaculis leo dictum eu. Fusce eget imperdiet libero. Phasellus ex lectus, varius vel metus a, imperdiet cursus augue. Nunc cursus ipsum in turpis interdum euismod. Aliquam vitae hendrerit mauris, ac euismod elit. Ut lorem velit, cursus a nulla at, fermentum porttitor ipsum. Nunc laoreet scelerisque vestibulum. Vestibulum iaculis feugiat tortor, eget varius metus sodales non. Aenean eu augue at sem bibendum feugiat. Nam pulvinar leo a lorem ultrices, a mattis metus luctus. Nunc sed scelerisque neque.
Aenean ac ante nunc. In mattis nibh et felis ornare rutrum. Nullam interdum faucibus metus eu suscipit. Aenean vel nibh diam. Vivamus eu ex sit amet enim sodales vehicula nec at nisi. Praesent dapibus sed lectus non vehicula. In lacinia mi sagittis scelerisque tincidunt. Aliquam ante eros, elementum eu volutpat in, imperdiet eget metus.
Aliquam volutpat venenatis purus sed egestas. Fusce accumsan mattis sapien, sed sagittis lorem vehicula ac. In interdum mi non arcu pharetra, eu aliquet turpis suscipit. Nullam venenatis neque nec nisi eleifend rhoncus. Curabitur tristique placerat blandit. Ut interdum tortor ut luctus finibus. Morbi eu ultricies dolor. Integer nec egestas risus, eget elementum purus. Aenean nec lacinia est, et egestas velit. Cras ipsum metus, fermentum vitae facilisis in, suscipit vel nisl. Mauris congue sem sit amet efficitur vehicula. Praesent euismod, libero ut tempus suscipit, leo nunc condimentum eros, vitae finibus nibh leo et diam. Morbi scelerisque, massa eget luctus sagittis, justo metus pretium purus, id sodales est tellus finibus magna. Quisque vel eros a eros malesuada placerat et ut lorem.
Nunc quis diam eget nisl aliquam varius in sagittis sem. Pellentesque viverra hendrerit metus sit amet mattis. Sed ut fringilla lacus. Phasellus ultrices volutpat ante a commodo. Etiam eget porttitor leo. Nulla viverra id libero ut fermentum. Sed eget ullamcorper est. Fusce sem ex, blandit porta sem id, suscipit venenatis urna. Phasellus quis tellus non sem convallis eleifend nec non elit. Suspendisse dictum rutrum porttitor.
</p>
</section>
</body>
</html>I could move the section right using position, margin, etc, but various problems will arise:
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
font-family: arial;
}
nav {
width: 300px;
height: 100%;
border: 1px solid black;
background: silver;
position: fixed;
}
ul {
margin: 0;
padding: 0;
list-style: none;
margin-top: 50px;
}
a {
display: block;
text-decoration: none;
background: black;
margin: 10px;
padding: 10px;
color: white;
}
nav, section {
float: left;
}
section {
width: 900px;
height: 1400px;
padding: 50px;
margin-left: 300px;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</nav>
<section>
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum quis erat sed egestas. Fusce magna nisl, blandit eget lacinia vel, tincidunt ac ex. Aenean quis blandit augue. Nulla suscipit lorem sagittis, gravida nisl non, luctus sapien. In hac habitasse platea dictumst. Aenean non lorem dui. Nunc pulvinar vehicula lacus, et feugiat eros lobortis eget. In malesuada eget eros id bibendum. Vestibulum eu interdum tellus, vel blandit eros. Vivamus dignissim augue ac posuere luctus.
Praesent id ligula ex. Phasellus sit amet pulvinar leo, quis varius dolor. Donec consequat massa nec nibh varius, ac tincidunt nibh sollicitudin. Praesent finibus nunc odio, vitae mattis orci laoreet quis. Pellentesque pharetra sagittis nunc, eget iaculis leo dictum eu. Fusce eget imperdiet libero. Phasellus ex lectus, varius vel metus a, imperdiet cursus augue. Nunc cursus ipsum in turpis interdum euismod. Aliquam vitae hendrerit mauris, ac euismod elit. Ut lorem velit, cursus a nulla at, fermentum porttitor ipsum. Nunc laoreet scelerisque vestibulum. Vestibulum iaculis feugiat tortor, eget varius metus sodales non. Aenean eu augue at sem bibendum feugiat. Nam pulvinar leo a lorem ultrices, a mattis metus luctus. Nunc sed scelerisque neque.
Aenean ac ante nunc. In mattis nibh et felis ornare rutrum. Nullam interdum faucibus metus eu suscipit. Aenean vel nibh diam. Vivamus eu ex sit amet enim sodales vehicula nec at nisi. Praesent dapibus sed lectus non vehicula. In lacinia mi sagittis scelerisque tincidunt. Aliquam ante eros, elementum eu volutpat in, imperdiet eget metus.
Aliquam volutpat venenatis purus sed egestas. Fusce accumsan mattis sapien, sed sagittis lorem vehicula ac. In interdum mi non arcu pharetra, eu aliquet turpis suscipit. Nullam venenatis neque nec nisi eleifend rhoncus. Curabitur tristique placerat blandit. Ut interdum tortor ut luctus finibus. Morbi eu ultricies dolor. Integer nec egestas risus, eget elementum purus. Aenean nec lacinia est, et egestas velit. Cras ipsum metus, fermentum vitae facilisis in, suscipit vel nisl. Mauris congue sem sit amet efficitur vehicula. Praesent euismod, libero ut tempus suscipit, leo nunc condimentum eros, vitae finibus nibh leo et diam. Morbi scelerisque, massa eget luctus sagittis, justo metus pretium purus, id sodales est tellus finibus magna. Quisque vel eros a eros malesuada placerat et ut lorem.
Nunc quis diam eget nisl aliquam varius in sagittis sem. Pellentesque viverra hendrerit metus sit amet mattis. Sed ut fringilla lacus. Phasellus ultrices volutpat ante a commodo. Etiam eget porttitor leo. Nulla viverra id libero ut fermentum. Sed eget ullamcorper est. Fusce sem ex, blandit porta sem id, suscipit venenatis urna. Phasellus quis tellus non sem convallis eleifend nec non elit. Suspendisse dictum rutrum porttitor.
</p>
</section>
</body>
</html>First than when I resize the page as the section which was set to 900px wide, it will create a scroll horizontally and this is not to happen.
NOTE: These are the layout examples I’m trying to do Layout 1, Layout 2, Layout 3, Layout 4, does not need to be exactly the same, but the contents are based on the above example.
That’s right! Thanks @Sam, by force :)
– user173282
Sam, in the case of
calc(100% - 300px)that even you gave the example my screen is 1536px, so 100% of 1536 is 1536 and less 300 will give 1236, it will decrease 300px proportionally while the screen is resized?– user173282
Yes, it will decrease the Section by deducting the 300px of the total width of 100%.
– Sam
Okay, thank you very much :)
– user173282