http://jsfiddle.net/4ZC2A/
I'm trying to get my white wrapper div to have a height of 100% without messing up my sticky footer. I've tried removing height: auto !important so my wrapper div will extend 100%, but that messes up my sticky footer. It also causes the footer to overlap the pictures when resizing. Any help is appreciated thank you.
.supercontainer {
min-height: 100%;
height: 100%;
height: auto !important;
margin: 0 auto -100px;
position: relative;
background: #f8f8f8;
}
.wrapper {
border-right: 2px solid #e5e5e5;
border-left: 2px solid #e5e5e5;
background: white;
margin: 0 auto;
width: 1200px;
height: 100%;
padding-top: 50px;
}
Here's a working copy of your fiddle. Please do not use display:table
DEMO
Your code needs some site architecture. And as far as the wrapper overlapping your footer, if you mean going under it when you scroll, well, it has to go somewhere. You did want it fixed after all.
When making a footer fixed (sticky) you have to understand the page will reach its bottom and the footer will be there blocking it. SO you give the page a margin-bottom for the size of the footer to force that page bottom up like so
.wrapper {
margin: 0 auto 100px auto;
}
Related
I'm creating two columns that I want to fill the page. Very simple. However, I'm getting a very slight vertical scrollbar. Setting margin: 0 and padding: 0 on the html and body didn't fix it.
I've looked into overflow: hidden but I don't like it. I also looked into placing a clear:both div at the bottom, but that didn't do anything. I've looked into using min-height, but I can't seem to get it to work properly.
I have two questions:
Why is that vertical scrollbar appearing?
How can I remove the vertical scrollbar?
Live Example: http://jsfiddle.net/XrYYA/
HTML:
<body>
<div id="palette">Palette</div>
<div id="canvas">Content</div>
</body>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#palette {
float: left;
width: 300px;
height: 100%;
border: 1px solid black;
}
#canvas {
margin-left: 300px;
height: 100%;
border: 1px solid blue;
}
It's because of the 1px borders on each side of the element.
100% + 2px border(s) != 100%.
You could use box-sizing to include the borders in the height of the element.
jsFiddle example
div {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
Alternatively, you could use calc() to subtract the 2px.
height: calc(100% - 2px);
jsFiddle example
My situation:
On my page I have multiple collapsible panels in the right hand column of my main content.
At the moment what happens is when I expand the panel (which contains a large amount of text) it goes off the page.
Therefore meaning that the user can't read it. This due the fact that the height is hard coded.
Now what I want to happen is when the div expands, if it reaches the max height of the page, the page height expands to incorporate all of the text.
Question:
Is there a way to make it possible that the page height expands along with the div?
My CSS:
.container {
width: 1000px;
margin: 0px auto;
background-color:White;
height: 0px auto;
}
#page {
overflow: hidden;
width: 900px;
padding: 0px 50px 50px 50px;
background-color: #FFFFFF;
}
#content {
float: right;
width: 580px;
}
Thankyou for any suggestions
Instead of using height you could try to set position to "absolute" and 0px top and bot on the .container?
.container {
width: 1000px;
margin: 0px auto;
background-color:White;
top: 0px;
bottom: 0px;
}
You can make .container a clearfix so it will expand to the size of the floated element inside of it. Here's a great article on using clearfix.
.container {
width: 1000px;
margin: 0px auto;
background-color:White;
height: 0px auto;
}
.container:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
That code will work for everything outside of IE6&7. If you need tose too just take a look at the article.
Never mind guys, I solved it....It was due to the fact that i was positioning the div with a relative height and width, so i just used margin-top instead.
Thanks to everyone
I am new to coding and have a small problem I can't figure out. I have a #wrapper div defined to allow me to center my content on the page and color the background white (background color defined in css). Whenever I have the height property set to auto, I have a white box at the top of my page when rendered which seems to represent the padding definitions I have set in the #wrapper properties. My actual page height is fine when rendered meaning that all the content appears as expected, but the only way to make the white box extend to the bottom of the page so the whole background is white is to enter a fixed height value. Here's what I have:
#wrapper {
width: 940px;
height: auto;
/* border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000; */
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
position: relative
}
Any help is surely appreciated!
#wrapper {overflow: hidden}
OR
#wrapper {overflow: auto}
If you want the #wrapper div to extend to the bottom of the page you need to provide an explicit height. height: auto will adjust to fit the content only. If #wrapper is a direct child of your main page div or just below your body you can set that parent element (body or some div) to something like 100% or a static value and then set your #wrapper to a percentage of that value like...
I am NOT advocating inline styles!! just an example
<body style="height: 480px">
<div id="wrapper" style="height: 95%">
content!
</div>
</body>
Body could also be a percentage and would then adjust to the window height, might work but is probably not what you want, just another option.
I am building an web application .
I have added a footer to the page .
The footer become larger in Firefox ( horizontally ). Any possible reasons ?
The footer is a sticky div as mentioned here - http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Container CSS -
.container{
background: #ffffff;
width: 90%;
min-height: 100%;
height: auto !important;
height: 100%;
background: #FFF;
margin: 0 auto -60px;
max-width: 1200px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 768px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
}
Footer CSS -
#footer {
height: 60px;
background-color: #F0F0F0 ;
width: 90%;
margin: 0 auto 0;
-moz-border-radius: 2px;
border-radius: 2px;
}
Just add these two property of footer element as of container element
#footer
{
max-width: 1200px;
min-width: 768px;
}
remove -60px in margin in css to solve this issue of fixed footer UI design
so i have a normal 960px layout, i want to add a div that can use 300px inside that 960 and the rest of the space (browser width) i want to fill with that div...but always stay on the same position inside the wrapper (im not talking about a vertical fixed element)
can i do this without using javascript? but if theres isnt another option its ok
Example:
<div class="wrapper">
<div class="fill">Something</div>
</div>
CSS:
.wrapper {
margin: 0 auto;
width: 960px;
background: #ddd;
}
.fill {
margin: 300px 0 0 0;
width: 300px;
background: red;
}
thank you
If I well understood what you need: try this fiddle
http://jsfiddle.net/jGmcV/show/
http://jsfiddle.net/jGmcV/ (source)
this should be the effect, but I placed an extra wrapper around your wrapper. The width of red box inside the dark container is always of 300px no matter what the size of the viewport is.
You can use margin-left:-10%; and margin-right:-10%;
If i understood correctly.
or you can
.wrapper {
margin: 0 auto;
width: 960px;
background: #ddd;
position:relative;
}
.fill {
margin: 300px 0 0 0;
width: 300px;
background: red;
position:absolute;
top:0px;
left:-10%;
}