i'm extremely frustrated right now. I can't figure out why my container won't extend to the bottom of the page. it reaches the bottom of the visible window, but if you scroll down past that, then the background ends.
my basic structure looks something like this...
<div id='container'>
<div id='content'>
/*Some Content here but all divs opened here are closed. (Title Bar, Nav, etc)
<div id='mainTableContainer'>
/*This is where a bulk of the code is. A table is generated in PHP and it
gets fairly lengthy.
</div>
</div>
</div>
So that's basically the HTML. I can't for the life of my figure out why #container won't
extend to the bottom of the page!
And the CSS
html{
height:100%;
}
body {
font: 100%/1.4 "Museo-sans", Verdana, Arial, Helvetica, sans-serif;
background: #ccc;
margin: 0;
padding: 0;
color: #000;
height:100%;
background-image:url(images/bg.png);
}
.container {
width: 960px;
background: #FFF;
height:100%;
margin: 0 auto;
border-left-style:dashed;
border-right-style:dashed;
border-width:1px;
border-color:#bf0000;
}
.content {
height:100%;
padding: 10px 0;
}
#mainTableContainer{
margin:0px auto;
width:90%;
height:100%;
text-align:center;
}
I tried a lot of the tips I found on this site, but nothing was helping. I don't think anything is floated. I tried setting all the heights to 100%, I tried setting a min width... I can't figure it out!!
EDIT:
OK I MADE A JSFILDDLE
So if you shrink the size of the display second in jsfiddle to smaller than the table, and then refresh it, you'll see that the background doesn't go all the way down, and the table is left 'floating' in the air.
http://jsfiddle.net/LGM3y/1/
You're trying to select a class, but container is an ID, so you need:
#container
instead of
.container
If that doesn't fix it try setting the background CSS on the HTML tag instead of the container.
html{
height:100%;
background:#ccc url(images/bg.png);
}
etc
It seems to work fine (if I understand exactly what you're asking) if you remove the
html {height: 100%;}
The container fills the space ..
One trick I use for this on <div>'s (which has mixed results in IE) is to specifically set display: block in the CSS rules for the container that you want to extend.
Example:
#container {
display: block;
height: 100%;
}
Related
I created a div where I plan to a title for my webpage, I set the width to 100% but there was still white on the sides and top. I got the top to disappear but the sides won't, I assume it's got something to do with the movement of the div, I've checked everywhere, but everyone has different divs for different purposes so I couldn't find the answer. In case you guys wanna show an example of your solution you could do so here
Here is the HTML:
<div id="toptitle">
</div>
For my CSS I tried using margin-left: -8px and the same for the right side but they don't work like that, it's only movement of the div and even when I don't set the left side yet the right still won't move till there's isn't a white gap:
#toptitle {
width: 100%;
height: 140px;
background: #42647F;
margin-top: -15px;
}
Reset your body margin. Also make a research for reset css.
body {
margin: 0;
}
Add margin: 0 to the body :
body{
margin:0;
}
You are missing body margin, please have a look at the below working snippet taken from your codepen. and there is no need to have negative top margin too.
body {
margin: 0
}
#toptitle {
width: 100%;
height: 140px;
background: #42647F;
}
<div id="toptitle">
</div>
The body tag has a default margin of 8px which you have to remove. So just add this to your code:
body{
margin:0;
}
You should also remove margin-top:-15;
Hope this is clear to you!
I have been playing around with my content in order to achieve my desired effect however now my footer will not be at the bottom of the page below all content. I it is currently fixed at the bottom of the page, however this overlaps a navigation bar running down the left hand side. I have the main body of the content inside a div - main container, with the footer outside of this.
HTML for my footer:
<div class="footer">
<div class="footerContent">
<p>Copyright © 2014 www.danielparry8.com</p>
</div>
</div>
CSS for footer:
.footer {
width: 100%;
z-index:999;
bottom:0;
clear:both;
position:fixed;
}
.footerContent {
font-family: sans-serif;
color: #FFF;
float:left;
width:100%;
margin-top: 10px;
margin-bottom: 10px;
}
.footer p {
float:left; width:100%; text-align:center;
}
I understand that fixed positioning is probably not the method to use, however when I use other methods it rises towards the top of the page, and still overlaps my content.
All content is inside a main content div with the following CSS
html, body, #maincontainer { height: 100%; }
body > maincontainer { height: auto; min-height: 100%; }
This has been getting on my nerves for days and no other solutions I have browsed on here have worked, I presume their is an error in my code somewhere I just can't find it!
Thanks!
you need to change position: fixed to absolute end add bottom: 0;
footer and your unit must be located outside of the wrapper
I used a margin-bottom: <footerheight> on the body css. Might be a bit 'cheaty' but seems to work on everything I tried.
It's my button:
<div id="body">
<button>Hello</button>
</div>
and its style:
#body{
width:400px;
margin:0 auto;
background:#eee;
border:1px solid #ccc;
}
button {
display: block;
margin: 0 auto;
}
It's centered, but let's see the result in ipad:
It shifts to left.
Take a look at this case: http://jsfiddle.net/c2HLe/9/
Note.
This is similar to my previous question, but in this case I made it with a simple structure, so I think people can focus better on the problem.
To center your button using margin: 0 auto;, you also need to define the width of the button. Something like this.
Alternatively, you can also use this.
#body{
text-align: center;
}
button {
display: inline-block;
}
In your original CSS, if the width of the container (margin+border+padding+content width) exceeds 1024px (iPad viewport width), you will get unexpected results. So make sure you keep that in mind.
I have a very short (in height) page here: http://www.problemio.com/auth/forgot_password.php and it looks extremely awkward since the background color only goes down until the page ends.
I thought about making a set height to extend below the screen, but don't really want to do that because it will make my css more messy.
Is there a simple way to make that kind of a page extend all the way down?
here is my css that sets the general layout:
body, html
{
#padding: 5px;
}
body
{
font-family: "Century Gothic",Helvetica,Arial,sans-serif;
margin: 0;
padding: 0;
font-size: 1em;
background-color: #5C5957;
#background:url(/img/ui/background_image.png) top left no-repeat;
#background-size: 100%;
}
/* makes the background of the top bar gray */
.container
{
position: relative;
background-color: white;
overflow:hidden;
width:1000px;
margin: 0 auto;
}
Thanks!
Place the background-color rule to the html element also as:
html { background-color: #5C5957; }
Give the page a minimum height of 100%?
You Can also give min-height to layout div say 500px.
I would like to align my container div to center vertically just like it is aligning himself horizontally because of margin: auto;. I've searched some time on google on how to do that but it does not seem to be working for me. Maybe there is some kind of universal way to do that, as easy as margin: auto; method for horizontal centering? Because it seems for me very strange that we live in 2011 year and there is still no simple css command for doing this task...
#container
{
margin: auto;
width: 960px;
height: 640px;
background-color: brown;
}
There are tons of tutorials for vertical alignment, especially for IE, which needs special care. One of them: Vertically center content with CSS. Also another answer here.
Can it be even simpler...
html, body {
overflow:hidden
}
#container {
width:960px;
height:640px;
position:absolute;
top:50%;
left:50%;
margin-top:-320px;
margin-left:-480px;
background:brown
}
The overflow:hidden is to hide the scrollbar that appears (html for IE6 and body for IE5). I don't know why this happens.
But if you want to keep it scrollable if the browser window is smaller, just make the height 639px and remove the overflow:hidden.
If your div has a fixed height, you can align it vertically by adding another div (with a float) with a negative margin (half the height of the main div) and then alter your div's CSS (adding the clear).
Also don't forget to specify the 100% height of the html and body, without that it doesn't work.
Like this:
CSS:
html {
overflow: auto;
}
html, body {
margin:0;
padding:0;
height:100%;
}
#alignDiv {
float:left;
height:50%;
margin-bottom:-320px; /* half the centered div */
width:1px;
}
#container
{
margin: 0 auto;
width: 960px;
height: 640px;
background-color: brown;
clear:left; /* without the clear it won't center */
}
html:
<div id="alignDiv"></div>
<div id="container"></div>