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
Related
So I currently have the following HTML/CSS:
<style type="text/css">
body {
background: #eeeeee;
}
.table {
display: table;
margin: 0px auto;
max-width: 400px;
position: relative;
}
.row {
display: table-row;
max-width: 400px;
}
.td1,
.td2 {
display: table-cell;
border: 2px #aaaaaa solid;
padding: 15px;
background: #ffffff;
font-size: 18px;
color: #333333;
}
.td2 {
border-top: none;
color: #777777;
position: absolute;
max-width: 400px;
right: 0px;
left: 0px;
}
.under_div {
position: relative;
}
</style>
<body>
<div class="table">
<div class="row">
<div class="td1">Some random text that changes and can change the height of this div/td</div>
</div>
<div class="row">
<div class="td2">Some random text that changes and can change the height of this div/td</div>
</div>
<div class="row">
<div class="under_div">
<p>Some random text that remains the same always
</div>
</div>
</div>
</body>
My problem is that the second td (td2) needs to be position: absolute. There is a reason why it is so, so therefore it just can't be a regular div, as that would make this much easier :)
So, as you can see the next in the under_div is occupying the same space as the td2div. What I would like is for that to right under the td2div. In principle I could just try to position it so that it fits right under. But as stated in text of the divs the text changes, and therefore the height will be random for both the td1 and td2 divs.
So is there a way where I can stack the under_div div just under the td2 div where it of course follows along according to whatever size the two other divs have, and not just stick around in one position ?
I have tried just making another table-div after the first one. But that doesn't seem to do anything either...
I think you need to rethink your design a little as I don't think it's possible to do this with an absolutely positioned element. You can accomplish what I believe you want using float and clear. An example jsfiddle is here.
I'm looking to create a website (or at the very least a homepage) like Joules.com
I essentially want to create boxes side by side in varying sizes but want them to resize or move to a new line with the browser window resizing (responsive?). It's also necessary for them to be centered. I can get to the point where I have the divs side by side but they don't seem to be centered... Here's what I have so far. Any help would be greatly appreciated. I'm kind of nooby in this department but wanting to learn!
CSS
#container {
width: 100%;
margin: 0 auto;
overflow: hidden;
}
#Womens {
height: auto
width: 241px;
float: left;
margin: 0 auto;
text-align:center;
}
#Mens {
height: auto
margin: 0 auto;
width: 241px;
float: left;
text-align:center;
}
#Footwear {
height: auto
margin: 0 auto;
width: 241px;
float: left;
text-align:center;
}
#Accessories {
height: auto
margin: 0 auto;
width: 241px;
float: left;
text-align:center;
}
HTML
<body><center>
<div id="container">
<div id="Womens">Womens</div>
<div id="Mens">Mens</div>
<div id="Footwear">Footwear</div>
<div id="Accessories">Accessories</div>
</div>
First at all you don't need to use an ID for each element, since your CSS code is the same for everyone use a classname instead:
<div id="container">
<div class="column">Womens</div>
<div class="column">Mens</div>
<div class="column">Footwear</div>
<div class="column">Accessories</div>
</div>
Then don't use float because you can't center those elements, use inline-block:
#container {
font-size:0;
text-align:Center;
}
.column {
font-size:14px;
display:inline-block;
}
Check this Demo Fiddle
Your CSS could be much simpler by using a class (Don't Repeat Yourself ;) ).
If you put text-align: center; on the container instead the container itself and its child contents will be centered. If you want you could then override the setting for the separate columns, or just for their content.
You've also used fixed pixel values for the column width, so they can't really be "responsive." You can use percentage values there as well, but that can have some screwy side effects. Note that 4 columns even with auto margins still need to be < 100% or else they wrap oddly. They also might collapse or overlap at smaller sizes. You can set a min-width on the container or the columns to help prevent this, along with a margin-bottom to keep them separate if they do wrap.
Also, if you just use percentage width and inline-block, the columns will be aligned at the bottom. Using vertical-align: top; fixes that. You said initially you wanted different heights, but if you didn't you could set a min- or max-height & put something like overflow:scroll on the content.
#container {
width: 100%;
min-width: 320px;
margin: 0 auto;
overflow: hidden;
text-align:center;
}
.box {
margin: 0 auto;
margin-bottom: 10px;
width: 20%;
min-width: 90px;
padding: 1%;
vertical-align: top;
display: inline-block;
background-color: #678;
color: #fff;
}
.content {
background-color: #fff;
color: #333;
padding: 1em;
text-align: left;
}
<body>
<div id="container">
<div id="Womens" class="box">Womens
<div class="content">This is some left-aligned women's content about/for women. View the Code Snippet in fullscreen!</div>
</div>
<div id="Mens" class="box">Mens
<div class="content">This is some left-aligned men's content about/for men. If you resize the browser the columns will be responsive, but break after a certain point.</div>
</div>
<div id="Footwear" class="box">Footwear
<div class="content">This is some left-aligned footwear content about/for feet. Feet are weird.</div>
</div>
<div id="Accessories" class="box">Accessories
<div class="content">This is some left-aligned accessory content about stuff you men or women could potentially put on their feet, or whatever.</div>
</div>
</div>
</body>
I'm trying to stretch the content of a div the height of the page. I've Googled the problem and so far nothing works. The whole thing is starting to give me a headache. Perhaps someone more experienced could take a look at my code? The full stylesheet is >400 lines, so I'm including what is (hopefully) relevant.
"Wrapper" takes up 100% of the page height, whereas "contentShadow" stretches only to the height of the text in the div "content".
Edit: as far as I can tell, every container has its height set to 100%, which whould make "contentShadow" 100% as well. Right...?
Edit 2: I'm starting to see the problem, but don't know how to solve it. While the following code will keep the footer down, it also means that since .wrapper doesn't have height:100%, "contentShadow" will not stretch. The question then is how I keep my footer down while changing this code:
.wrapper {
min-height: 100%;
height: auto !important;
margin: 0 auto -37px;
}
To this:
.wrapper {
height: 100%;
}
Basic structure of the page:
<div id="body">
<div id="headerWrapper"></div>
<div id="wrapper">
<div id="contentShadow">
<div id="#contentWrapper">
<div id="content">
<!-- contentshadow stretches the height of this content and no further, but SHOULD stretch the height of the entire page -->
</div>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer"></div>
Css rules relevant to these divs:
html, body {
height: 100%;
}
#headerWrapper {
height: 314px;
width: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -37px;
}
#contentShadow {
min-height: 100%;
width: 994px;
background-image: url(../images/contentShadow.png);
background-repeat: repeat-y;
margin-right: auto;
margin-left: auto;
}
#contentWrapper {
min-height: 100%;
width: 940px;
margin-right: auto;
margin-left: auto;
padding-right: 16px;
padding-bottom: 16px;
padding-left: 16px;
padding-top: 17px;
background-color: #EDECEC;
overflow: hidden;
}
#content {
min-height: 100%;
}
.footer, .push, {
height: 37px;
}
.footer {
background: white;
clear: both;
height: 37px;
}
You have really wrong code:
.wrapper matched <div class="wrapper"> not <div id="wrapper">.
<div id="#contentWrapper"> is not correct, you should try <div id="contentWrapper">
height: auto; is the problem. The wrapper needs to be 100% height, not auto...
the height: 100% after height: auto !important doesn't make sens, because of the !important keyword.
Maybe it's the default margins and padding, have you tried this?
body {margin: 0px; padding: 0px; }
I had this issue for the better part of my life, but I just solved it for myself, so I'm sharing, just in case somebody else can benefit.
My HTML/BODY selector is set to height:100%.
My container div within the HTML/BODY selector is set to min-height:800px.
My CONTENT div inside of the CONTAINER div didn't have a height, and I had the issue of the div not stretching to the bottom of the page. When I inspected this div, I noticed that for some reason, it was stretching way below its container div, pushing it up and creating that annoying space at the bottom of the page. Once I placed a height on that inside DIV, the issue went away for me.
I hope this helps.
The contentShadow must have overflow: auto. Try this
body, html { height: 100%; margin: 0; padding: 0; }
#container { width: 100%; height: 100%; overflow: auto; display: block; }
<body>
<div id="container">
This should fill the page!
</div>
</body>
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.
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.