I have a div container that contains 2 divs: banner and content. Both banner and content have css property width set to 100% but they are different when rendered.
this is my index.html
<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet"/>
<title>JoeY34kaze's gw2 stuff</title>
<body>
<div id="container">
<header>
<h1>
This is my header.
</h1>
</header>
<div id="banner">
<h2>
This is the banner.
</h2>
</div>
<div id="content">
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
</div>
</div>
</body>
</html>
this is my style.css
body {
text-align:center;
}
header {
width:100%;
height:100px;
background: #dbdbdb;
z-index:10;
position: fixed;
}
#container {
overflow:hidden;
min-width:100%;
padding:0;
}
#banner {
width:100%;
height: 500px;
padding:0;
position: fixed;
top: 100px;
background-color:#707070;
}
#content {
height:100%;
width:100%;
position: relative;
top:400px;
background-color: #ebebeb;
}
and the page looks like this:
website
Until i resolve this issue the page is also live here https://gw2stuff.herokuapp.com/
The problem is that on the right side the 2 divs aren't aligned, but they should be.
I think that the problem comes from the relative position of the content div, but i was unable to fix it, so my question is how do i align the 2 divs so that their widths will match?
Remove the default margin on the body
body {
margin:0;
}
The #content div is affected by that margin but the fixed position elements are not although they are placed in relation to that margin becausee you have not stated a left:0 position for them.
This should be automatically included in any CSS Reset.
Addmargin: 0 to the content,
If this doesn't work, move the content a little, perhaps left: 5px would work
Change position of content to:
position: fixed;
Related
I have the following html structure:
<main class="previous-knowledge">
<h1>Title 1</h1>
<section>
<article>
<h2>Subtitle 1</h2>
<p>Very big paragraph 1</p>
</article>
<article>
<h2>Subtitle 2</h2>
<p>Very big paragraph 2</p>
</article>
</section>
</main>
And the following css:
main.previous-knowledge h2 {
position: sticky;
top: 0px;
}
I want to stick every subtitle while a user scrolls over every article, unfortunately, even when the subtitle stays stick on top, it does not "push" the p element. What I mean with push is that the p element stays below the h2 while scrolling.
So I'm having a problem that randomly just started happening. I mean that it wasn't a problem yesterday, and today it is.
So, there are blank spaces appearing at random places in my page every time I reload it. There are 3 specific places the blank space happens, but they alternate every time. Note that this doesn't seem to happen on IE, it only happens on Chrome as far as I can tell. Also, when I resize the page even a single pixel, the blank spaces disappear, even if I set it to the original size where the spaces were appearing.
I have already set * { margin: 0; padding: 0;} at the start of my CSS file and it doesn't seem to have any effect. The blank spaces still appear.
My CSS file is very long, so I don't think pasting everything here will be useful. But my initial lines look like this:
* {margin:0;padding:0;}
html, body {height:100%}
#content {min-height:100%}
#content-inside {padding-bottom:135px}
#footer {height:250px;margin-top:-125px}]
* {font-family:arial;color:#555}
body {background-color: #CDE6BC}
p, h3, h4 {margin-bottom:6px}
h1 {font-size:32px;color:#57783F}
h2 {font-size:24px}
h3 {font-size:19px; font-weight: bold}
h4 {font-size:16px}
p, label, input {font-size:14px}
h2 {color:#57783F}
label {display:block;font-weight:bold}
input {padding:2px}
input[type="text"] {
background-repeat: repeat-x;
background-image: url(/cocamar/imagens/fundoCampo.png);
border: 1px solid rgb(119, 119, 119);
color: rgb(0, 0, 0);
}
br {clear:both}
/*a {color:blue;text-decoration:none}
a:hover {color:red;text-decoration:underline}*/
#header {background:#fff;padding:10px;padding-bottom:0px;text-align:center}
#footer {background:#57783F;padding:10px}
#footer * {color:white}
#footer-inside {text-align:center}
.card {padding:10px; position: relative;}
.sub {padding-top:20px;padding-left:10px}
.card {box-shadow:1px 1px 1px 0px rgba(0, 0, 0, 0.3), 1px 2px 5px 0px rgba(0, 0, 0, 0.3);margin:5px;background:white;min-height: 275px;}
/* responsive starts here */
* {box-sizing:border-box;margin:0;padding:0}
.row::after {content:"";clear:both;display:table}
[class*="col-"] {float:left}
[class*="col-"] {width:100%}
#media only screen and (min-width: 768px) {
.col-1 {width:8.33%}
.col-2 {width:16.66%}
.col-3 {width:25%}
.col-4 {width:33.33%}
.col-5 {width:41.66%}
.col-6 {width:50%}
.col-7 {width:58.33%}
.col-8 {width:66.66%}
.col-9 {width:75%}
.col-10 {width:83.33%}
.col-11 {width:91.66%}
.col-12 {width:100%}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1' />
</head>
<body>
<div id="content">
<div id="header">
<div id="header-inside">
<h1>Some Text Here</h1>
<br>
</div>
</div>
<div id="content-inside">
<div class='sub'>
<h2>Some Text Here</h2>
</div>
<br>
<div class='col-4'>
<div class='card'>
<h3>Some Text Here</h3>
<p>Some Text Here</p>
</div>
</div>
<div class='col-4'>
<div class='card'>
<h3>Some Text Here</h3>
<p>Some Text Here</p>
</div>
</div>
<div class='col-4'>
<div class='card'>
<h3>Some Text Here</h3>
<p>Some Text Here</p>
</div>
</div>
</div>
<br>
<div class='sub'>
<h2>Some Text here</h2>
</div>
<div class='col-12'>
<div class='card'>
<h3>Some Text Here</h3>
<p>Some Text Here</p>
</div>
</div>
<br>
<div class='col-6'>
<div class='sub'>
<h2>Some Text Here</h2>
</div>
<div class='card'>
<h3>Some Text Here</h3>
<p>Some Text Here</p>
</div>
</div>
<div class='col-6'>
<div class='sub'>
<h2>Some Text Here</h2>
</div>
<div class='card'>
<h3>Some Text Here</h3>
<p>Some Text Here</p>
</div>
</div>
</div>
</body>
</html>
Please tell me if anything is missing so I can edit it.
The expected result looks like this:
But what I'm getting is this:
For my "sub" elements, Chrome's Inspect Element is saying this:
What could be causing this? I haven't added any code since yesterday, but this wasn't happening then, and it's happening now.
The code snippet does not replicate the issue you're having in your screenshot which makes diagnosing and helping a lot more difficult. That said, I suspect the issue is with the bar going across the SSIs box:
As your boxes are floating to the left, the box on the right will sit under whatever overflowing content is coming out of the box on the left. Perhaps add overflow:hidden to the parent div?
.card {
overflow:hidden;
}
I'm trying to put a fixed element within another fixed element like this
<div class="wrapper-fixed">
<div class="content">
<div class="element-fixed">
<p>I'm fixed in Chrome, FF</p>
<p>Why not in IE ?</p>
</div>
</div>
</div>
When I scroll the page in Chrome and FF element-fixed stay fixed but in IE it scrolls too and I guess that should not happen because a fixed element is outside the document flow.
I tried pulling it out of the content but did not work, pulling it out of wrapper-fixed it does but in my case I can't.
HERE A JSFIDDLE similar to my real situation
So why that happens and how fix it without pulling it out of wrapper-fixed
Adding images to illustrate the problem:
Option 1
Change your wrapper position to absolute
.wrapper-fixed{
position: absolute;
...
Fiddle - http://jsfiddle.net/za4hdmpf/
Option 2
Won't be suitable as this requires a solution that does not involve pulling element-fixed out of wrapper-fixed.
Change your markup and make position adjustments to your element-fixed
<div class="wrapper-fixed">
<div class="content">
<p>Content</p>
<p>Content 1</p>
<p>Content 2</p>
<p>Content 3</p>
<p>Content 4</p>
<p>Content 5</p>
<p>Content 6</p>
<p>Content 7</p>
<p>.</p>
<p>.</p>
<p>.</p>
</div>
</div>
<div class="element-fixed">
<p>I'm fixed in Chrome, FF</p>
<p>Why not in IE ?</p>
</div>
CSS
.element-fixed{
position: fixed;
width: 170px;
border-radius: 10px;
top: 70px;
left: 50%;
margin-left: -290px;
background-color: #fff;
}
Fiddle - http://jsfiddle.net/vuykwu76/
I have this page which is actually rendered fine in all browsers, meaning.. when browser is contracted, to show mobile version of the layout, based on #media query css settings, but not in IE8, as far as I can check. How do I get around of this problem.
Here is all the code btw:
<html>
<head><style>
body{margin:0px; padding:0px;}
#a{height:150px; background-color:#ffffff; border-bottom:1px solid #CCC;}
#x{min-height:350px; margin-top: 10px; background-color:#CCC;}
#y{min-height:30px; margin-top: 10px; background-color:#CCC;}
#media all and (min-width:700px){
#b{width:100%; min-height:400px;}
#sep {
margin: auto;
overflow: hidden;
width: 960px;
}
#x{width:65%; float:left;}
#y{width:32%; float:right; }
#c{background-color:#656565; height:80px;}
.for-mob{display:none;}
.for-desc{background-color:green;}
}
#media all and (max-width:700px){
.for-mob{background-color:green;}
.for-desc{display:none;}
#b{width:100%; min-height:400px; }
#x{width:100%; display:block; }
#y{width:100%; display:block; }
#c{background-color:#656565; height:100px;}
}
</style></head>
<body>
<div id='a'> <h1>I am header </h1>
</div>
<div id='b'>
<div id='sep'>
<div id='x'>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
</div>
<div id='y'>
<h1>I am sidebar </h1>
</div>
</div>
</div>
<div class='for-desc'><h1>If you shrink the browser, I become invisible</h1> </div>
<div class='for-mob'><h1>If you maximize the browser, I become invisible</h1></div>
<div id='c'>
<h1> I am a simple footer </h1>
</div>
</body>
Response.js only creates rules on elements, to emulate the media query use
https://code.google.com/p/css3-mediaqueries-js/
It would be better to include a specific css only for IE<9 but it is up to you :)
<div id="header">header</div>
<div id="content">
content spanning several pages...
</div>
<div id="footer">Footer - Fixed at the bottom of each page</div>
I want to print #header and #footer on every page in print mode. I searched a lot but nothing seems to work, even position:fixed doesn't work as expected.
If you're willing to switch over to tables for your layout (not necessarily ideal), you can do it with the <thead> and <tfoot> elements. They'll print at the top and bottom of every page:
<table>
<thead>
<!-- Will print at the top of every page -->
</thead>
<tbody>
<!-- Page content -->
</tbody>
<tfoot>
<!-- Will print at the bottom of every page -->
</tfoot>
</table>
Another option is to use display table-header-group and table-footer-group but cross-browser support isn't great:
#header {
display: table-header-group;
}
#main {
display: table-row-group;
}
#footer {
display: table-footer-group;
}
I think I arrived too late :), but I was looking for something like this, and I found one answer that helps me (source https://www.youtube.com/watch?v=yDgFLysON98).
I wrote the div tag before and after the content like this
<div id="header">Top div content</div>
.
.
.
<div id="footer">Bottom div content</div>
Example:
<!DOCTYPE html>
<html>
<head>``
<style>
body {
background-color: #CCC;
margin:48px 0px 0px 64px;
}
div#header {
position:fixed;
top:0px;
left:0px;
width:100%;
color:#CCC;
background:#333;
padding:8px;
}
div#footer {
position:fixed;
bottom:0px;
left:0px;
width:100%;
color:#CCC;
background:#333;
padding:8px;
}
</style>
</head>
<body>
<div id="header">HEADER</div>
<h1>Page Heading</h1>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<div id="footer">FOOTER</div>
</body>
</html>
... I hope this helps.
For that you need to use the mso (microsoft office css properties) in your style:
<style><--
#page
{
size:21cm 29.7cmt;
margin:1cm 1cm 1cm 1cm;
mso-title-page:yes;
mso-page-orientation: portrait;
mso-header: header;
mso-footer: footer;
}
#page content {margin: 1cm 1cm 1cm 1cm;}
div.content {page: content;}
</style>
Nisse Engstroms answer is correct. You just need to put the thead and tfoot content inside a tr to make it work.And it also is the best method because when you use absolute positioning in a div to make header and footer it will always overlap with your main body content on the next page.
<table>
<thead>
<tr> !-- these are important
<th id="header"> !--- these are important
!--- content of header here
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
!---- main body here
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th id="footer">
!----- content of footer here
</th>
</tr>
</tfoot>
</table>