I'm trying to negative position a DIV element (in the example is #content), but my problem is the div's container (#wrapper2), gets too much height (actually is the height the #content is giving, but as I'm moving the content up, I would like to decrease the height of #wrapper2 accordingly).
Here I give you an example to show what I'm trying to achieve. If you try the sample, you'll see that footer stays at too many distance from container. I can make a dirty hack here and make footer top:-200px too but then the scroll bar of the window goes over the footer.
<!DOCTYPE html>
<html>
<head>
<title>Relative positioning demo</title>
<style>
/* RESET STUFF */
html {
margin:0;
padding:0;
border:0;
}
body, div, p, h1 {
margin: 0;
padding: 0;
border: 0;
}
/* END RESET */
h1 {
background-color: yellow;
}
p {
margin-bottom: 1em;
}
/* LAYOUT */
#wrapper1 {
text-align: center;
height: 250px;
background-color: lightgray;
}
#wrapper2 {
background-color: lightblue;
}
#content {
width: 950px;
margin: 0 auto;
background-color: white;
padding: 5px;
height: 560px;
/* HERE's my problem */
position: relative;
top: -200px;
}
#footer {
background-color: black;
color: white;
height: 40px;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper1">
<h1>This is my heading</h1>
</div>
<div id="wrapper2">
<div id="content">
My content here
</div>
</div>
<div id="footer">
lorem ipsum
</div>
</body>
</html>
If you have any suggestions, keep in mind that I must see both, the lightgrey and lightblue background (they're images on my site), so margin-top: -200px is not an option (like someone suggested in related questions that I've searched for)
Thanks!
Change the top property to margin-top
Demo
position: relative;
top: -200px;
changed to
margin-top: -200px;
For future references, what I've finally done is to merge the images on the wrapper1 and wrapper 2 in the same image (they were background patterns), so I only have one wrapper now, and I don't need to relative position the content above the second one, it just goes following the page flow.
In the end I've understood that you can't delete the unwanted height without using some sort of Javascript.
Related
I'm trying to move the footer down 50px to go outta screen,
but the negative margin doesn't work (nothing is moving) and I'm not quite sure why...
footer {
background: #111;
padding: 50px 0 100px;
text-align: center;
margin-bottom: -50px;
}
Here's an example
body {
background: white;
margin: 0;
}
section {
height: 100vh;
}
footer {
background: green;
padding: 50px 0 100px;
text-align: center;
color: white;
margin-bottom: -50px;
}
<body>
<section>
Section 1
</section>
<section>
Section 2
</section>
<footer>
<div>
some content here
</div>
</footer>
</body>
Negative margin is working fine but it's not doing what you are expecting. negative margin-bottom will not make the element to move outside. It will make the parent element to shrink instead.
Here is a simplifed example:
.box {
border:5px solid #000;
}
.box div{
background:red;
height:200px;
margin-bottom:-50px;
}
<div class="box">
<div></div>
</div>
As you can see the parent element has a height less than its child due to negative margin and we are having an overflow.
This is what is happening in your case, and since the overflow is by default scroll you will keep seeing the footer. Add some border and you will better see:
body {
background: white;
margin: 0;
border:2px solid;
}
section {
height: 100vh;
}
footer {
background: green;
padding: 50px 0 100px;
text-align: center;
color: white;
margin-bottom: -50px;
}
<section>
Section 1
</section>
<section>
Section 2
</section>
<footer>
<div>
some content here
</div>
</footer>
In order to hide the overflowing part, simply adjust the overflow property and you will have what you want:
html {
overflow:auto;
}
body {
background: white;
margin: 0;
border:2px solid;
overflow:hidden;
}
section {
height: 100vh;
}
footer {
background: green;
padding: 50px 0 100px;
text-align: center;
color: white;
margin-bottom: -200px;
}
<section>
Section 1
</section>
<section>
Section 2
</section>
<footer>
<div>
some content here
</div>
</footer>
As you can see, I have added a bigger negative margin to shrink more the body element and to make all the footer outside then I hide it using overflow:hidden
use transform instead of margin
footer {transform: translateY(-50px);}
If I understood your question right, you want a footer to be half hidden from the view.
If so, try to use fixed position, add this to your css:
position: fixed;
bottom: -50px;
If you are using Firefox, try hitting the F12 button for the Web Developer tool.
In the inspector tab you can inspect the element and set the css rules for that element.
Probably you have some kind of conflict with rules declared somewhere else.
You can change live the css for testing in the Web Developer -> Inspector -> Stiles.
For positioning use position and top/bottom/left/right. For example
position: relative;
bottom:50px;
I am learning how to make an existing site, responsive and something that appears to be so simple, is making me absolutely crazy.
When I apply the max-width-480px style sheet, it is cutting off about 5 px of my left edge. You can tell it is missing because the rounded corners I added in css are cut off abruptly on the left but are nice and smooth on the right. I have spent several hours trying to tweak the wrapper and mainwrapper css and nothing seems to fix it. Any ideas?
Note: that the image for the topwrapper is a set width white background with rounded corners. Since the set sized graphic is not going to be responsive, I have removed it for the smaller screens and just added the border-radius to the mainwrapper div.
NOTE2: I tried to add an image to show you the issue, but because I am a new poster, I was unable to. The site is: www.develdesign.com/WaterWorks Please be sure to view it on your smartphone to see the issue. Thank you.
A snippet of the wrapper related divs in html
<body>
<div id="wrapper">
<div id="topwrapper"></div>
<div id="mainwrapper">
<!-- Header Start -->
<div id="header">
<div class="center">
<!-- Logo Start -->
<div id="logo"><img src="images/wworks/wwlogo239px.png" alt="logo" /></div>
<!-- Logo End -->
<div id="headerright">
<!-- Menu Navigation Start -->
<? require('top-navigation.php'); ?>
<!-- Menu Navigation End -->
</div><!-- end headerright -->
</div><!-- end center -->
</div><!-- end header -->
Regular Desktop Styles (non-responsive css)
#wrapper {
width: 100%;
max-width: 976px;
height: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
}
#topwrapper {
height: 19px;
width: 100%;
max-width: 976px;
background: url(../images/topwrapper.png) no-repeat;
}
#mainwrapper {
width:100%;
max-width: 976px;
background: url(../images/mainwrapper.png) repeat-y;
}
#bottomwrapper {
margin: 0 auto;
height: 55px;
width: 100%;
max-width: 976px;
background: url(../images/bottomwrapper.png) no-repeat;
}
.center {
margin: 0 auto;
width: 900px;
}
/* ----------------------- HEADER -----------------------*/
#header {
width: 960px;
height: 50px;
padding-bottom: 39px;
background: url(../images/bgheader.jpg) bottom center repeat-x;
margin: 0 auto;
}
#headerright {
padding-top: 20px;
width: 670px;
float: right;
position: relative;
}
#logo {
margin-top: 15px;
float: left;
width: 220px;
}
Responsive for max-width-480px
#wrapper {
width: 100%;
}
#topwrapper {
display:none;
}
#mainwrapper { /*white background for all header and maincontent */
border-radius: 5px 5px 25px 25px;
}
#bottomwrapper {
display: none;
}
.maincontent {
width: 60%;
float: left;
}
<!-- HEADER -->
#header {
/*width: 50%;*/
/*height: 50%;*/
/*background-image: none;*/
}
.center {
width: 95%;
}
#headerright{ /* includes phone numbers and full site navmenu */
display:none;
}
#logo {
width: 100%;
}
Can't say for sure but after a quick look, could it not be possible there is padding somewhere knocking it out. If so make sure to set the box-sizing attribute in your css.
Link:
Box Sizing
Also check there is no whitespace between elements, this also effects display: inline-block in such a way that two divs at 50% width won't fit next to each other. You can either set line height to 0 or comment out the whitespace.
I finally figured it out! The mainwrapper had a background image that was also a set width image (like the topwrapper). Once I realized the mainwrapper's background image repeated only y, I removed it and replaced it with a background-color of white instead and it looks great.
#mainwrapper {
width:100%;
max-width: 976px;
background: url(../images/mainwrapper.png) repeat-y;
}
I know that we normally use margin:auto however I am using the code below.
HTML :
<article>
<header></header>
</article>
CSS:
article{
max-width: 500px;
margin: auto; /* goes in the middle - great */
}
header{
width: 130%;
margin-left: -30%;
}
Demo
At this point I am placing the article in the center. However, as the browser/window size gets smaller, I would like to center the article as if its width was as wide as the header. Basically, at some point (as you shrink the browser window) the header will be at the edge on the left, whilst not taking advantage of the blank space on the right.
I don't want to have an extra div, but if I did, I would wrap the article in a div and give it an auto margin.
screenshot http://i3.minus.com/i2yPFqNDgeBbS.png
Maybe I'm misunderstanding something, but don't you just want:
margin-left: 15%;
on the header?
This code does what is described, but if you want to keep the two edges aligned you would need to get into some javascript, I recommend jquery for this kind of thing.
<html>
<head>
<title></title>
<style>
html, body {
width: 100%;
text-align: center;
}
.header {
width: 960px;
margin-left: auto;
margin-right: auto;
position: relative;
left: -100px;
background-color: blue;
}
.article {
width: 75%;
margin-left: auto;
margin-right: auto;
background-color: blue;
}
</style>
</head>
<body>
<div class="header">Header</div>
<div class="article">TODO write content</div>
</body>
</html>
I'm having a hard time with what I thought would be a dead simple issue.
I'm trying to create a div that spans 100% of the width of a browser window. The div is filled with several child divs that expand to fill that entire space with alternating colors like a football field. These divs would expand to fit the full width of a given space that has individual 1% stripes that fill that space fully.
This seems to work fine in Firefox, but in Safari (and Chrome) the calculation seems to be too strict, and leaves some extra leftover space on the right-most div.
Is there any way to avoid this leftover space? I've encountered the same issue in Safari and Chrome even when placing it in a fixed width div... there is always space left over on the right. I wonder if I'm just asking it to do too much math?
Here is the code I am using, with alternate versions dividing the space into divisions of 5% and divisions of 1%. Sorry, it's long and redundant code.
<html>
<head>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.clearfix {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
#field {
width: 100%;
background: #009900;
height: 100px;
margin: 0;
margin-bottom: 25px;
padding: 0;
}
.singleyard {
width: 1%;
float: left;
margin: 0;
padding: 0;
background: #009900;
}
.fiveyards {
width: 5%;
float: left;
margin: 0;
padding: 0;
}
.alt {
background: rgba(0,0,0,0.25);
}
.oneyard {
width: 20%;
float: left;
margin: 0;
padding: 0;
}
-->
</style>
</head>
<body>
<div id="field">
<div class="fiveyards">5</div>
<div class="fiveyards alt">10</div>
<div class="fiveyards">15</div>
<div class="fiveyards alt">20</div>
<div class="fiveyards">25</div>
<div class="fiveyards alt">30</div>
<div class="fiveyards">35</div>
<div class="fiveyards alt">40</div>
<div class="fiveyards">45</div>
<div class="fiveyards alt">50</div>
<div class="fiveyards">55</div>
<div class="fiveyards alt">60</div>
<div class="fiveyards">65</div>
<div class="fiveyards alt">70</div>
<div class="fiveyards">75</div>
<div class="fiveyards alt">80</div>
<div class="fiveyards">85</div>
<div class="fiveyards alt">90</div>
<div class="fiveyards">95</div>
<div class="fiveyards alt">100</div>
</div>
<div id="field">
<!--below section is repeated 10 times -->
<div class="singleyard">1</div>
<div class="singleyard">2</div>
<div class="singleyard">3</div>
<div class="singleyard">4</div>
<div class="singleyard">5</div>
<div class="singleyard">6</div>
<div class="singleyard">7</div>
<div class="singleyard">8</div>
<div class="singleyard">9</div>
<div class="singleyard alt">10</div>
<!--end repeated section-->
</div>
</body>
</html>
I had the same problem, this is what I discovered: somewhere in your CSS you have another div that has a width of 100% and ALSO has padding. Since the padding value is added to the width, the value of that div becomes greater than 100%. The solution is to make sure not to use padding on any div that is set to 100% width. If you need padding, try adding the padding to the element inside the div instead.
Only thing I can think of is to add:
html, body
{
width: 100%;
}
Just to make sure safari knows the parent container of field is also 100%;
Another thing to try is to add:
html { overflow-y: scroll; }
That should force a side scrollbar, even if it's grayed out. I wonder if some webkit rendering temporarily flashes a scrollbar, but fails to give the space back. Any of that work?
I have fixed mine by
body
{
background-color:#dddddd;
width:100%;
margin:0px;
}
I fixed by using display: table-cell
#field {
width: 100%;
background: #009900;
height: 100px;
margin: 0;
margin-bottom: 25px;
padding: 0;
display: table;
}
.singleyard {
width: 1%;
margin: 0;
padding: 0;
background: #090;
display: table-cell;
}
.fiveyards {
width: 5%;
margin: 0;
padding: 0;
display: table-cell;
}
From my experience on a similar issue. When your code will not stretch the entire way on the mobile device (but will on the desktop), fixing it is a matter of finding some element that is pushing the boundary invisibly. There should be some item that is breaking out of its boundary - for me it was a logo image that was sticking about 20px outside the header div. You can find this by giving everything a border or by eliminating one thing at a time. Once you have found it, you can move it or remove it in order to allow things to stretch the full way again.
I have fixed mine by adding
html, body
{
width: 100%;
margin: 0px;
}
happy coding!!!
Noticed this wasn't answered. I was having the same issue. I added the following lines to my CSS class:
margin-right:-10px;
margin-left:-10px;
adding min-width: 100% seems to do the trick
In my html I have a div classed "footer". I want it to have a bg to #000 and occupy the full page width and left no white space after it.
I am currently using this CSS:
.footer {
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.75em 0.75em;
background: #000;
position: relative;
top: 490px;
border-top: 1px solid #000;
}
But the full page width isn't filled with this css code.
Any help? Thanks!
I use sticky footer: http://ryanfait.com/sticky-footer/
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
* {
margin: 0;
}
html,
body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
/* the bottom margin is the negative value of the footer's height */
}
.footer,
.push {
height: 142px;
/* .push must be the same height as .footer */
}
<div class='wrapper'>
body goes here
<div class='push'></div>
</div>
<div class='footer'>Footer!</div>
Essentially, the wrapper is 100% height, with a negative margin the height of the footer ensuring the footer is always at the bottom without causing scroll.
This should accomplish your goal of having a 100% width footer and narrower body as well, because divs are block level elements, and their width is by default 100% of their parent. Keep in mind the footer here is not contained by the wrapper div.
you could make the footer div absolute to the page like this:
.footer {
position:absolute;
bottom:0px;
width: 100%;
margin: 0;
background-color: #000;
height: 100px;/* or however high you would like */
}
I use a few DIV elements for each section of my webpages.
<div id="tplBody">
<div id="tplHeader">
...
</div>
<div id="tplContent">
...
</div>
<div id="tplFooter">
...
</div>
</div>
Each section is relatively positioned. Using wrapping DIVs, I can set the wrapper a specific width and the elements inside it can be 100% width.
I suggest you steer away from absolute positioning and floating, because they create compatibility issues so may not appear correctly on all browsers.
if you want that your footer be fixed on your page :
.footer{ position:fixed;}
but if you want your footer fixed end of page :
see that
I'm glad for the support you all provided, each one of these replies helped me somehow. I came to this code:
.footer {
height: 59px;
margin: 0 auto;
color: #fff;
clear: both;
padding: 2em 2em;
background: #000;
position: relative;
top: 508px;
}
Thanks!
This issue i have came cross when I started an web application using Bootstrap menu and fixed footer irrespective of browser resolution.
Use below styling for footer element
In-line style
External style sheet using class attribute in Div
<div class="footer"></div>
style.css
.footer
{
backgroud-color:black;
position:fixed;
bottom:0;
height:2%;
}
External style sheet using id attribute in Div
<div id="divfooter"></div>
style.css
#divfooter
{
backgroud-color:black;
position:fixed;
bottom:0;
height:2%;
}
You can use this styles in your CSS to achieve your goal
.footer{
background-color: #000;
min-width: 100%;
height: 100px;
bottom:0;
position: fixed;
}
If you are using bootstrap try with margin-left: -15px and margin-right:-15px but it will not be necessary in most cases when you have your own class.
html:
<div class="footer">
<p>
Some text comes here! © 2015 - 2017
</p>
</div>
css:
.footer {
width: 100%;
height: auto;
text-align: center;
background: rgb(59, 67, 79);
position: fixed;
bottom: 0%;
margin-top: 50%;
}
* {
padding: 0;
margin: 0;
}
I was facing same issue and solved it with using jquery.
<body>
<div id="header" style="background-color: green">This is header</div>
<div id="main-body" style="background-color: red">This is body</div>
<div id="footer" style="background-color: grey">This is footer</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
if(($(document).height() - $("body").height()) > 0){
var main_body_height = $(document).height() - $("#footer").height() - $("#header").height()
$('#main-body').css('min-height', main_body_height+'px');
}
</script>
What I'm doing here is based on the Screen size of the User.
I'm increasing the main-body section height after subtracting the height of header and footer from it.
If the complete html body height is less then the user screen size then it will increase the main-body section height and automatically footer will reach the bottom of page.