I have a site that I'm trying to design and I have elements that need to line up horizontally, this isn't working correctly, though. These elements are in a parent wrapper div and they are floated left and right respectively. There is also an image div inside one of the elements that has text wrapping around it. So far, I've been able to get the text to wrap around the image div correctly using floats, however, the other element on the page is not lining up correctly.
Here's a pen and accompanying code:
http://codepen.io/anon/pen/WbXpZz
HTML
<body>
<header></header>
<div id="page">
<div id="image"></div>
<section>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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 adipiscing 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.</p>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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>
</section>
<aside>
<h2>Lorem Ipsum</h2>
<ul>
<li>Lorem - <span>Ipsum</span></li>
<li>Lorem - <span>Ipsum</span></li>
</ul>
<aside>
</div>
</body>
CSS
body{
background-color: rgb(128, 128, 128);
}
header, #image, #page{
display: block;
}
header, #page, #image{
float: left;
}
header, #page{
position: absolute;
z-index: 0;
}
header{
top: 0;
left: 0;
right: 0;
height: 100px;
background-color: rgb(0, 0, 0);
border-bottom: 3px solid rgb(171, 166, 27);
}
header ul{
color: rgb(255, 255, 255);
color: black;
}
header ul li{
display: inline-block;
}
#page{
top: 150px;
left: 5%;
right: 5%;
}
#image{
width: 300px;
height: 400px;
margin-right: 2%;
margin-bottom: 2%;
background-color: white;
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 25px;
border: 3px outset rgb(171, 166, 27);
box-shadow: 5px 5px 15px rgb(0, 0, 0);
}
section{
display: block;
float left;
width: 80%;
border-right: 3px solid rgb(171, 166, 27);
background-color: blue;
}
section h1{
font-size: 36px;
font-weight: bold;
color: rgb(255, 255, 255);
}
section p{
font-size: 20px;
color: rgb(0, 0, 0);
}
aside{
display: block;
float: right;
width: 18%;
background-color: red;
}
If I change the section and aside to be inline-block, they line up, but they do so underneath the image. Also, if I position the image div absolutely, everything lines up the way it should, but the text in the section no longer wraps around the image div. Can anyone help?
To make it work the way you want you need to change the order on your markup:
From:
<div id="image"></div>
<section></section>
<aside><aside>
To:
<div id="image"></div>
<aside><aside>
<section></section>
Floated Elements First to ensure the block behavior of section doesn't affect the flow of the floated elements.
CodepenDemo
Related
I am building a side navigation component and one of the requirement is to show a white arrow at the end of selected item. I am not quite sure how to achieve it. Here is the expected behavior, if you notice the mappings selected menu item has a white arrow at the end of it.
Here is the code snippet with html and css bits that I have so far. I did some research and looks like may be it can be achieved by using css border manipulation of an extra element sitting next anchor tag, but I could not quite get to the bottom of it.
.person-container {
display: flex;
}
.main-section {
margin: 0px;
padding: 10px;
flex-grow: 2;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 16px 16px;
text-decoration: none;
border: 0.2px solid #004563;
border-bottom: 0px;
}
li:last-child {
border-bottom: 0.2px solid #004563;
}
li a.is-active {
background-color: #004563;
color: white;
}
li a:hover:not(.is-active) {
background-color: #70c2e5;
color: white;
}
<div class="person-container">
<nav class="side-nav">
<ul>
<li>Details</li>
<li>Addresses</li>
<li>Hobies</li>
<li>Affiliates</li>
<li><a class="is-active" href="#about">Mappings</a></li>
<li>Notes</li>
</ul>
</nav>
<div class="main-section">
<h3>User Profile</h3>
<hr />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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 adipiscing 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>
</div>
</div>
Add CSS with :after
li a.is-active {
background-color: #004563;
color: white;
position:relative;
}
li a.is-active::after {
right: 0%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-right-color: #fff;
border-width: 10px;
margin-top: -10px;
}
.person-container {
display: flex;
}
.main-section {
margin: 0px;
padding: 10px;
flex-grow: 2;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 16px 16px;
text-decoration: none;
border: 0.2px solid #004563;
border-bottom: 0px;
}
li:last-child {
border-bottom: 0.2px solid #004563;
}
li a.is-active {
background-color: #004563;
color: white;
position:relative;
}
li a:hover:not(.is-active) {
background-color: #70c2e5;
color: white;
}
li a.is-active::after {
right: 0%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-right-color: #fff;
border-width: 10px;
margin-top: -10px;
}
<div class="person-container">
<nav class="side-nav">
<ul>
<li>Details</li>
<li>Addresses</li>
<li>Hobies</li>
<li>Affiliates</li>
<li><a class="is-active" href="#about">Mappings</a></li>
<li>Notes</li>
</ul>
</nav>
<div class="main-section">
<h3>User Profile</h3>
<hr />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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 adipiscing 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>
</div>
</div>
You can do easier with a simple background:
.person-container {
display: flex;
}
.main-section {
margin: 0px;
padding: 10px;
flex-grow: 2;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 16px 16px;
text-decoration: none;
border: 0.2px solid #004563;
border-bottom: 0px;
}
li:last-child {
border-bottom: 0.2px solid #004563;
}
li a.is-active {
/*arrow*/
background:
linear-gradient(to bottom left,#f1f1f1 49.8%,transparent 50%) 100% calc(50% + 5px),
linear-gradient(to top left,#f1f1f1 49.8%,transparent 50%) 100% calc(50% - 5px),
#004563;
background-size:10px 10px;
background-repeat:no-repeat;
/**/
color: white;
border-right:none;
}
li a:hover:not(.is-active) {
background-color: #70c2e5;
color: white;
}
<div class="person-container">
<nav class="side-nav">
<ul>
<li>Details</li>
<li>Addresses</li>
<li>Hobies</li>
<li>Affiliates</li>
<li><a class="is-active" href="#about">Mappings</a></li>
<li>Notes</li>
</ul>
</nav>
<div class="main-section">
<h3>User Profile</h3>
<hr />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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 adipiscing 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>
</div>
</div>
I'm trying to create a CSS overlay using the blur filter.
#container {
position: relative;
height: 500px;
width: 500px;
}
#content {
color: #fff;
}
button {
background-color: #fff;
border-radius: 3px;
box-sizing: border-box;
color: #000;
cursor: pointer;
font-size: 14pt;
font-weight: 700;
padding: .75em 3.75em;
}
#content-not-blurred {
color: #fff;
}
#overlay {
top:0;
left:0;
right:0;
bottom:0;
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: -1;
color: rgba(209, 206, 209, 0.9);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), #000, rgba(0, 0, 0, .5));
filter: url('#blur');
filter: blur(5px);
}
<div id="container">
<div id="overlay">
<div id="content">
<p>I'm mr. myseeks</p>
<button>I want feedback</button>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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 adipiscing 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>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="5" />
</filter>
</defs>
</svg>
<div id="content-not-blurred">
<p>Look at me!</p>
</div>
</div>
I created an example in this codepen:
https://codepen.io/hetzbr/pen/zJLEaz
When I have a white button as content it's very prominent and difficult to read any content that's overlayed on the blur.
Is there a way that I can make the content colors less prominent?
I know that I can add opacity to the content to make the background content less visible, but curious if there's a way that the text can still have a nice blur effect without the buttons sticking out like a sore thumb.
You could add a brightness(50%); filter in addition to your blur to darken the blurred element, thus creating a bit more contrast with the white text.
#container {
position: relative;
height: 500px;
width: 500px;
}
#content {
color: #fff;
}
button {
background-color: #fff;
border-radius: 3px;
box-sizing: border-box;
color: #000;
cursor: pointer;
font-size: 14pt;
font-weight: 700;
padding: .75em 3.75em;
}
#content-not-blurred {
color: #fff;
}
#overlay {
top:0;
left:0;
right:0;
bottom:0;
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: -1;
color: rgba(209, 206, 209, 0.9);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), #000, rgba(0, 0, 0, .5));
filter: url('#blur') brightness(50%);
filter: blur(5px) brightness(50%);
}
<div id="container">
<div id="overlay">
<div id="content">
<p>I'm mr. myseeks</p>
<button>I want feedback</button>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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 adipiscing 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>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="5" />
</filter>
</defs>
</svg>
<div id="content-not-blurred">
<p>Look at me!</p>
</div>
</div>
You could add an opacity to the buttons only. That way you'd still have the correct colors on the container, but the buttons would stand out less.
In your CodePen, I added opacity: .5 do your button and that seemed to do the trick.
Your example with lower-opacity buttons
Must stick to the bottom of the webpage, should not be visible until
the user reaches the bottom of the page
For example
HTML
<footer>
This is a footer.
</footer>
CSS
footer {
padding: 10px;
background-color: #999999;
color: white;
text-align: right;
bottom: 0;
width: 96.75%;
position: fixed;
}
The problem is, it's still visible when the user hasn't reached the bottom of the page. I want it so it's not visible until they hit the bottom.
There are many techniques you can use, most do not involve JavaScript. Some rely on more modern CSS features not yet implemented in all browsers (like grid).
Here is a simple, fairly robust and cross browser example. It involves giving the body and HTML a 100% height and using negative margins.
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
footer.sticky {
height: 50px;
margin-top: -50px;
background-color:#efefef;
}
<body>
<div class="content">
<div class="content-inside">
content
</div>
</div>
<footer class="sticky">
<p>some footer content</p>
</footer>
</body>
With more content, the footer is pushed down
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
footer.sticky {
height: 50px;
margin-top: -50px;
background-color:#efefef;
}
<body>
<div class="content">
<div class="content-inside">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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>
</div>
</div>
<footer class="sticky">
<p>some footer content</p>
</footer>
</body>
You can use javascript ...
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight){
document.getElementsByTagName("footer")[0].style.visibility = 'visible';
}else{
document.getElementsByTagName("footer")[0].style.visibility = 'hidden';
}
};
body {
position: relative;
height:1000px; /*only for example to having scroll */
}
footer {
visibility:hidden;
padding: 10px;
background-color: #999999;
color: white;
text-align: right;
bottom: 0;
width: 96.75%;
position: fixed;
}
<footer> the footer</footer>
I've been trying to solve a number of issues for this questionnaire I'm making. I've reformatted this question because my old one was pretty confusing and I'm taking a new angle on the issue.
With the new code I've summited the problem is that the child div .question-container inside the .questionnaire-box is spilling out all the text past the set height. I prefer .question-container to have the same height as .questionnaire-box and scroll on overflow.
.questionnaire-container {
position: fixed;
width: 100%;
height: 100%;
padding: 2rem 0;
background-color: rgba(100, 100, 100, .1);
}
.questionnaire-box {
position: relative;
width: 80%;
max-height: 80%;
margin: 0 auto;
background-color: #ffffff;
}
.question-container {
max-height: 80%;
overflow-y: scroll;
}
.questionnaire-nav {
position: absolute;
bottom: 0;
width: 100%;
height: 55px;
border-top: 1px rgba(100, 100, 100, .3) solid;
background-color: #ffffff;
text-align: center;
}
button {
margin 1rem;
}
<html>
<body>
<div class="questionnaire-container">
<div class="questionnaire-box">
<div class="question-container">
<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>
<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>
</div>
<div class="questionnaire-nav">
<button>Submit</button>
</div>
</div>
</div>
</body>
</html>
This is what it looks like inside my app.
And this is what I'm trying to achieve.
The question is a little overly-complex, but I assume the problem here is that you're unable to scroll down and view all of the content in .question-container.
Does this work?
https://jsfiddle.net/tobyl/bemkkz72/
If so, the critical CSS is the additional padding-bottom in this block:
.questionnaire-box {
position: relative;
width: 80%;
max-height: 80%;
margin: 0 auto;
padding: 1.5rem 2rem 6rem 2rem;
border-radius: 20px;
background-color: #ffffff;
overflow: auto;
}
There were quite a few things I changed in your code for the snippet below - it will be too much to explain everything. Still, some of the most important changes:
No flexbox
Fixed element (nav) outside of the DIV above it
Look at the code. I can explain more, if this is what you are after, but not tonight (i.e. "good night" :-)...
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
.questionnaire-container {
width: 100%;
height: calc(100% -50px);
padding: 5rem 0;
background-color: rgba(255, 100, 100, .1);
}
.questionnaire-box {
width: 80%;
margin: 0 auto;
padding: 1.5rem 2rem;
border-radius: 20px;
background-color: #ffffff;
}
.question-container {
height: 100%;
margin-bottom: 55px;
padding: 3rem 4rem;
}
.questionnaire-nav {
position: fixed;
bottom: 0;
text-align: center;
width: 100%;
height: 30px;
border-top: 1px rgba(100, 100, 100, .3) solid;
background-color: #ffffff;
padding: 10px 0;
}
<html>
<body>
<div class="questionnaire-container">
<form class="questionnaire-box">
<div class="question-container">
<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</p>
<p>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</p>
<p>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>
</div>
</div>
<nav class="questionnaire-nav">
<button>Previous</button>
</nav>
</form></body>
</html>
Try to change these three things in .questionnaire-nav:
position to fixed
width to 75%
and deleted margin-left: -20px;
Does this work for you?
html, body {
max-height: 100%;
}
.questionnaire-container {
position: fixed;
width: 100%;
height: 100%;
padding: 5rem 0;
background-color: rgba(255, 100, 100, .1);
}
.questionnaire-box {
position: relative;
width: 80%;
max-height: 80%;
margin: 0 auto;
padding: 1.5rem 2rem;
border-radius: 20px;
background-color: #ffffff;
overflow: auto;
}
.question-container {
height: 100%;
margin-bottom: 55px;
padding: 3rem 4rem;
overflow-y: auto;
}
.questionnaire-nav {
display: flex;
position: fixed;
bottom: 0;
align-items: center;
justify-content: center;
width: 75%;
height: 55px;
border-top: 1px rgba(100, 100, 100, .3) solid;
background-color: #ffffff;
}
<html>
<body>
<div class="questionnaire-container">
<form class="questionnaire-box">
<div class="question-container">
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.
</div>
<nav class="questionnaire-nav">
<button>Previous</button>
</nav>
</form>
</div>
</body>
</html>
I am trying to get my left sidebar to expand its background color to the left, while keeping my "layout" in the middle of the page.
Illustration:
My problem is that the div.container centers the layout (which is good) but I can not seem to get my sidebars background to expand the left horizontal and vertical space to the left.
Is there any with a smart trick on how to achieve this?
Currently I have this so far:
<div id="app" class="container">
<div class="row">
<div id="sidebar" class="col-md-3">
<h2>Sidebar / Nav</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>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.</p>
</div>
<div id="main" class="col-md-9">
<h1>Main Content</h1>
<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. 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>
</div>
</div>
</div>
And CSS:
html {
height: 100%;
}
body {
background: url("http://j.eremy.net/examples/stretchy-sidebar/bg_body.gif") repeat scroll center top rgba(0, 0, 0, 0);
height: 100%;
margin: 0;
padding: 0;
}
#app {
height: 100%;
}
#sidebar {
color: #fff;
height: 100%;
}
#main {
background: none repeat scroll 0 0 #d9cead;
height: 100%;
}
See my currently example and problems here: http://jsfiddle.net/gaLc9/
Check if this can help you
HTML
<div class="outer">
<div class="cont">
<div class="left">Test</div>
<div class="right">Right</div>
</div>
CSS
* {margin:0}
.cont {
width: 940px;
margin: 0 auto;
background: #fff;
position: relative;
z-index: 2
}
.cont:after {
content: " ";
display: block;
clear: both;
}
.left {
width: 200px;
float: left;
min-height: 600px;
background: red
}
.outer:before {
content: " ";
z-index: 1;
display: block;
position: absolute;
left: 0;
top: 0;
background: red;
width: 50%;
height: 100%
}