-webkit- textarea losing top & bottom padding on vertical scrollbar - html

I have a textarea element with fixed width & height and no resize and when the vertical scrollbar appears the padding (top & bottom) of the element is ignored.
Here is a plnkr demo: http://plnkr.co/edit/jOeYXqkOZk3FCT24BRrk?p=preview
This happens only with Chrome (tested on Chromium, Linux version).
Here is my styling for the textarea element:
textarea{
background-color: #1c1b1b;
border-bottom: 3px solid #343434;
border-radius: 4px;
color: #fff;
display: block;
height: 165px;
margin-bottom: 21px;
padding: 10px;
resize: none;
width: 90%;
}
*One solution would be to wrap the textarea element inside a div with that specific padding, but then the scrollbar will not overlap that padding and will look kinda strange.
Edit: ok, maybe it won't look as strange as I thought, but I just wonder if there is a more elegant fix, within css maybe.

I've tried to think of a workaround, depending on your own hint. You've got it right, but didn't implement it yet. :) I just coded your idea. What I did was to enclose within a wrapper, and setting before and after pseudo elements to just hide the top and bottom parts. I hope that would solve your issue.
It would also run perfectly in Chrome, Firefox as well as in IE.
.container {
width: 90%;
position: relative;
}
textarea {
background-color: #1c1b1b;
border:0;
border-radius: 4px;
color: #fff;
display: block;
height: 165px;
margin-bottom: 21px;
padding: 10px;
resize: none;
width: 100%;
border-radius: 4px;
}
.container:before, .container:after {
content:'';
display: block;
height: 10px;
background: #1c1b1b;
position: absolute;
left: 4px;
right: 18px;
}
.container:before {
top: 0px;
}
.container:after {
bottom: 0px;
}
<div class="container">
<textarea>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.</textarea>
</div>

Related

CSS textarea image background with opacity without impacting the foreground text

I have a textarea that user can change its size.
I need to have an image background for it but I do not want the image disturbs the text so the image should be partially transparent without impacting the opacity of the text that user can type on top of it.
I followed this link which suggests using ::before but it does not work on my Firefox browser.
<textarea class="hero">
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.
</textarea>
CSS
.hero {
position: relative;
/* height: 100vh; */
/* width: 100%; */
display: flex;
align-items: center;
justify-content: center;
}
.hero::before {
content: "";
background-image: url('https://placekitten.com/1200/800');
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.75;
}
https://jsfiddle.net/z86yfLvh/1/
How should I fix this?
The easiest solution here would be wrapping your textarea element into a container, put background on it and tune the background of your textarea down, through background-color with alpha inside the rgba().
Like this:
.hero {
background-color: rgba(255, 255, 255, .7)
}
.hero-container {
background-image: url('https://placekitten.com/1200/800');
background-size: cover;
display: inline-block;
}
<div class="hero-container">
<textarea class="hero">
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.
</textarea>
</div>
I should mention also that ::before won't work with textarea because it would have to render it inside the textarea which can't contain any HTML elements directly. It's a hard limitation.
Alternative solution that also solves another issue that OP mentioned in the comment:
.hero {
background-color: rgba(255, 255, 255, .7);
width: 100%;
height: 100%;
resize: none;
}
.hero-container {
background-image: url('https://placekitten.com/1200/800');
background-size: cover;
resize: both;
overflow: auto;
width: 100%;
}
<div class="hero-container">
<textarea class="hero">
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.
</textarea>
</div>
I'm using resize: none on textarea to disable the ability to resize it and I'm adding it to the container instead, while width: 100%; height: 100% makes sure textarea stretches with the container too.

Container gets cuts off when using flex for a dialog in Internet Explorer 11

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

100% width split into 3* 33% divs

I've been trying to use 3 divs like a table, so to make 3 columns I thought I#d make 3 33% divs. That works fine and they fill the page up, but as soon as I want to add padding to make the text move off the border, the 3rd div moves into the next line.
Any suggestions to keep padding but all 3 in one row would be appreciated.
Code:
CSS:
.container {
padding-top: 53px;
width:100%;
}
.table1{
border-style: solid;
border-width: 2px;
float: left;
width: 33.3%;
text-align: justify;
padding-left: 3px;
padding-right: 3px;
background-color: gray;
}
.table2{
border-style: solid;
border-width: 2px;
border-left: 0px;
border-right: 0px;
float: left;
width: 33.3%;
text-align: justify;
padding-left: 3px;
padding-right: 3px;
}
.table3{
border-style: solid;
border-width: 2px;
float: left;
width: 33.3%;
text-align: justify;
padding-left: 3px;
padding-right: 3px;
}
HTML:
<div class="container">
<div class="table1">
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="table2">
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="table3">
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>
You could add box-sizing: border-box to the elements so that the padding/border is included in its height/width calculations:
.table1, .table2, .table3 {
box-sizing: border-box;
}
I'd suggest adding a common class to the tables as well:
Example Here
.table {
width: 33.33%;
box-sizing: border-box;
}
Use display: table and table-layout: fixed for the container and display: table-cell for columns:
.container {
display: table;
table-layout: fixed; /* For equal column widths regardless of their number. */
width: 100%;
}
.container > DIV {
display: table-cell;
}
Unlike floats, this method is guaranteedly free from any gaps between columns and on each side of the container.
Unlike Flexbox (IE10+), it works in IE8+.
Alternately, you can modify your code a little and make use of CSS calc() function like below:
width: calc(33.3% - 10px);
Where each div width is 33.3% - ( 3px padding left + 3px padding right + 2px border left width + 2px border right width) - because padding and borders add values to the element width -.
This for .table1 and table3, but for the middle .table2 div there's no border-right nor border-left width values so it is only 6px instead of 10px
Also you have ltos of redundant code so I simplified it a little JS Fiddle
.container {
padding-top: 53px;
width:100%;
}
.table1, .table2, .table3{
border:2px solid;
float: left;
padding: 0 3px;
width: calc(33.3% - 10px);
text-align: justify;
}
.table1{
background-color: gray;
}
.table2{
border:none;
border-top:2px solid;
border-bottom:2px solid;
width: calc(33.3% - 6px);
}
<div class="container">
<div class="table1">
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="table2">
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="table3">
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>
Flexbox works: do the following:
Apply reset:
html,
body {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0;
outline: none;
}
Make .container a flex container:
.container {
padding-top: 53px;
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
}
Apply this to each child (e.g. .table1, etc...):
flex: 1 0 auto;
Floats don't work in flex flow environments, so you can delete all float: left. added bonus is your columns match in height as well as width. If you wanted gutters (space between the columns like a newspaper), replace flex-start with space-between and decrease width if necessary.
html,
body {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0;
outline: none;
}
.container {
padding-top: 53px;
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
}
.table1 {
border-style: solid;
border-width: 2px;
text-align: justify;
width: 33.3%;
padding-left: 3px;
padding-right: 3px;
background-color: gray;
flex: 1 0 auto;
}
.table2 {
border-style: solid;
border-width: 2px;
border-left: 0px;
border-right: 0px;
text-align: justify;
width: 33.3%;
padding-left: 3px;
padding-right: 3px;
flex: 1 0 auto;
}
.table3 {
border-style: solid;
border-width: 2px;
text-align: justify;
width: 33.3%;
padding-left: 3px;
padding-right: 53px;
flex: 1 0 auto;
}
<p>I have added an extra 50px to .table3 to demonstrate that all columns maintain a 33.33% width.</p>
<div class="container">
<div class="table1">
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="table2">
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="table3">
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>

CSS / Div container margins issue

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

HTML5 Responsive Web Design: Fixed Header Not Working

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