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>
Related
I am trying to create a cross-browser dialog box system. Basically, you click a link and the dialog pops down. Surprisingly, I got it to work on all major browsers, including IE 11. The only issue is if the content inside the dialog box exceeds the window, the box gets cut off in IE 11. Here's the code:
/* Core styles */
html,
body {
position: absolute;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
left: 0;
top: 0;
}
.page {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
}
.content-wrapper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
box-sizing: border-box;
overflow: auto;
}
.card {
position: relative;
box-sizing: border-box;
margin: 3rem;
padding: 3rem;
color: rgba(0, 0, 0, 0.8);
background-color: #ffffff;
border-radius: 0.4rem;
border: 1px solid rgba(0, 0, 0, 0.2);
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
/* Dialog styles */
.dialog-outer {
position: absolute;
top: -100%;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
-webkit-transition: all .4s cubic-bezier(.25, .8, .25, 1);
transition: all .4s cubic-bezier(.25, .8, .25, 1);
z-index: 99;
outline: none;
}
.dialog-outer .dialog-inner {
height: 100%;
overflow: auto;
}
.dialog-outer .dialog-inner .dialog-content {
position: absolute;
box-sizing: border-box;
display: flex;
flex-direction: column;
top: -100%;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
}
.dialog-outer .dialog-inner .dialog-content .card {
margin: auto;
}
.dialog-outer:target {
top: 0;
}
.dialog-outer:target ~ .page .content-wrapper {
overflow: hidden;
}
.dialog-outer:target .dialog-content {
top: 0;
}
<!-- Dialog 1 -->
<div class="dialog-outer" id="dialog-1">
<div class="dialog-inner">
<div class="dialog-content">
<div class="card" style="width: 400px;">
<strong>Dialog 1</strong>
<br /><br />
<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>
Close
</div>
</div>
</div>
</div>
<!-- Dialog 2 -->
<div class="dialog-outer" id="dialog-2">
<div class="dialog-inner">
<div class="dialog-content">
<div class="card" style="width: 400px;">
<strong>Dialog 2 (long scrolling content)</strong>
<br /><br />
<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>
<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>
Close
</div>
</div>
</div>
</div>
<!-- Page -->
<div class="page">
<div class="content-wrapper">
<div style="padding: 20px;">
<!-- Toggles -->
Toggle dialog 1
<br /><br />
Toggle dialog 2
</div>
</div>
</div>
The huge chunks of code basically generates 2 dialog boxes. One where the content is tiny, so it does not exceed the page length, the other need requires scroll. Unfortunately, the second dialog box gets cut off in IE 11. It works on all the other browsers I tested on, including some old versions of Edge and Firefox. What exactly is the issue on IE 11?
The ideal answer would be one that requires no changes to the HTML markup, and the core styles.
You can download the above code as an HTML file here: https://anonfile.com/933cv8o0o0/dialog_html
Thanks for any help!
I think the issue is with flexbox. In the flex value of browser compatibility, it says:
IE incorrectly positions inline block content inside flex containers.
The issue can be fixed if you remove display: flex; in #dialog-2. You could change the following css styles like this:
.dialog-outer .dialog-inner .dialog-content {
position: absolute;
box-sizing: border-box;
/*display: flex;*/
flex-direction: column;
top: -100%;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
}
#dialog-1 .dialog-inner .dialog-content {
display: flex;
}
I'm new in CSS. I want to move the box div below when the browser is getting smaller or all box position go back column position when the browser is in desktop size. I have added flex-wrap and flex-direction in my source code but nothing happens. I don't know what mistake that I make. Hope you guys can help me solve this problem.Thank you in advance.
* {
padding: 0;
margin: 0;
}
.container-top {
background-color: green;
color: white;
}
.container-top-context {
display: flex;
flex-direction: column;
align-items: center;
height: auto;
}
.container-top-context h1 {
font-size: 70px;
word-spacing: 0.3em;
}
.container-top-context h2 {
font-size: 20px;
word-spacing: 0.2em;
}
.logo {
background-color: yellow;
height: 100px;
width: 100px;
margin-bottom: 10px;
}
.container-testimony-context {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box-1 {
flex: 1;
background-color: #EF5350;
color: #FFCDD2 padding:5px;
text-align: center;
}
.box-2 {
flex: 1;
background-color: #AB47BC;
color: #E1BEE7;
padding: 5px;
text-align: center;
}
.box-3 {
flex: 1;
background-color: #29B6F6;
color: #B3E5FC;
padding: 5px;
text-align: center;
}
.box-4 {
flex: 1;
background-color: #66BB6A;
color: #C8E6C9;
padding: 5px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>my flex box</title>
</head>
<body>
<div class="container-top">
<div class="container-top-context">
<h1>Road of Kalibaenan</h1>
<h2>Gives exact direction to unusual creatures</h2>
<div class="logo"></div>
</div>
</div>
<div class="container-testimony-context">
<div class="box-1">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>
<div class="box-2">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>
<div class="box-3">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>
<div class="box-4">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>
</div>
</body>
</html>
It is flexing as intended, just one at a time and at a very small screen size.
To control this better and make the flex-direction switch at once try using a media query like the updated exampled below:
* {
padding: 0;
margin: 0;
}
.container-top {
background-color: green;
color: white;
}
.container-top-context {
display: flex;
flex-direction: column;
align-items: center;
height: auto;
}
.container-top-context h1 {
font-size: 70px;
word-spacing: 0.3em;
}
.container-top-context h2 {
font-size: 20px;
word-spacing: 0.2em;
}
.logo {
background-color: yellow;
height: 100px;
width: 100px;
margin-bottom: 10px;
}
.container-testimony-context {
display: flex;
flex-wrap: wrap;
}
.box-1 {
flex: 1;
background-color: #EF5350;
color: #FFCDD2 padding:5px;
text-align: center;
}
.box-2 {
flex: 1;
background-color: #AB47BC;
color: #E1BEE7;
padding: 5px;
text-align: center;
}
.box-3 {
flex: 1;
background-color: #29B6F6;
color: #B3E5FC;
padding: 5px;
text-align: center;
}
.box-4 {
flex: 1;
background-color: #66BB6A;
color: #C8E6C9;
padding: 5px;
text-align: center;
}
#media screen and (max-width: 600px) {
.container-testimony-context {
flex-direction: column;
}
}
<!DOCTYPE html>
<html>
<head>
<title>my flex box</title>
</head>
<body>
<div class="container-top">
<div class="container-top-context">
<h1>Road of Kalibaenan</h1>
<h2>Gives exact direction to unusual creatures</h2>
<div class="logo"></div>
</div>
</div>
<div class="container-testimony-context">
<div class="box-1">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>
<div class="box-2">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>
<div class="box-3">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>
<div class="box-4">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>
</div>
</body>
</html>
How i can fix my sidenav while body scrolling
when i scroll down my sidenav bottom gets empty
var header = $("#menu");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >0) {
header.addClass("fixed");
} else {
header.removeClass("fixed");
}
});
.fixed{
position: fixed !important;
}
.c {
height: 100vh;
position: relative;
padding: 50px;
}
div#menu {
position: absolute;
padding: 20px;
background: #2196F3;
color: ghostwhite;
width: 200px;
z-index: 1;
height: 100vh;
}
.c {
height: 100vh;
padding: 50px;
margin-left: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 100%">
<div class="nav" id="menu">
<h2>Menu</h2>
</div>
<div class="c">
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.
</div>
</div>
I have a container div set to a fixed position at top of page and several relative position divs scrollable within the container. I can set margin left, right and bottom. But the top margin is ignored and runs up against the top of the container. What am I doing wrong here?
#container {
position: fixed;
width: 32rem;
height: 32rem;
background-color: #000000;
overflow: hidden;
}
#div1 {
position: relative;
width: 30em;
height: 40em;
margin: 5rem 1rem 5rem 1rem;
<div id="container">
<div id="div1"></div>
</div>
You need to add overflow:hidden and change height:22em in #div1
I think you want something like this and I hope it will helps you.
#container {
position: fixed;
width: 32rem;
height: 32rem;
background-color: #000;
overflow: hidden;
}
#div1 {
height: 22em;
margin: 5rem 1rem;
overflow: hidden;
position: relative;
width: 30em;
color:#fff;
}
<div id="container">
<div id="div1">
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.
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>
</div>
Is this the desired output? http://jsfiddle.net/t9rkpspu/
#container {
position: fixed;
width: 32rem;
height: 32rem;
background-color: #000000;
overflow: hidden;
}
#div1 {
color: white;
position: relative;
width: 30em;
height: 40em;
margin: 5rem 1rem 5rem 1rem;
}
I'm trying to create a basic HTML5 responsive web design where the header is fixed. I am trying to keep my HTML and CSS code clean and follow best practices. The header has a max width of 980 pixels but the blue header background expands to fill the window (see the diagram).
Right now there's a few issues with my CSS (maybe my HTML) that are causing the header to cover up the content below the header. The header's blue background is also not expanding to fill the left of the window. I also can't get the logo image to center vertically on the header. What I am I missing? I've been playing around with this all night but I've been unable to iron out these issues.
Fiddle: http://jsfiddle.net/DU3D6/
CSS
* { margin: 0; padding: 0; }
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}
#wrapper {
width: 100%;
max-width: 980px;
margin: auto;
}
header {
background-color: blue;
width: 100%;
height: 100px;
top: 0px;
display: block;
margin-left: auto;
margin-right: auto;
position: fixed;
}
#logo {
height: 70px;
width: 160px;
float: left;
display: block;
background: url(logo.png) 0 0 no-repeat;
text-indent: -9999px;
}
HTML
<div id="wrapper">
<header>
Logo
</header>
<section id="main">
<h1>Main section</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.</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>
</section>
</div>
I deleted and reposted with updated the tags.
You can remove the margin-left and margin-right from the header. Then add left zero. The JSFiddle doesn't show the image since it's a relative link, but if you want it left aligned but within the 980px centered block, then nest another div inside the header with width 980 and centered.
Then to make the header not cover the content initially, add a top margin bigger than the header, like 110px.
http://jsfiddle.net/A4atq/
* { margin: 0; padding: 0; }
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}
#wrapper {
width: 100%;
max-width: 980px;
margin: auto;
}
header {
background-color: blue;
width: 100%;
height: 100px;
top: 0px;
left: 0;
display: block;
position: fixed;
}
#logo {
height: 70px;
width: 160px;
float: left;
display: block;
background: url(logo.png) 0 0 no-repeat;
/* text-indent: -9999px */;
}
section#main {
margin-top: 110px;
}
}