I have decided to add a sidebar to the left side of all my pages in my website. The sidebar can either be concealed or visible, I do not want it to overlap the existing page.
If I were to have a sidebar as such, the content of the page tends to overflow with the container. I need the content to change according to its container width rather than the browser width.
I do not want to create a container for the content and set overflow-y to auto and make it stretch to browser height as I would need to do this for all my pages...
I have already tried changing the left margin on the body and adding a div with position: fixed as a sidebar.
How would I go about changing the content according to its container width rather than the browser width?
Try something like the approach below:
#content {
width: 80%; /* Adjust as need */
position: relative;
}
#content .children {
max-width: 100%; /* Or less, to keep the children from overflowing */
}
Note: I used imaginary ID and Class
Related
I cant seem to find how to place a div (footer) at the bottom of the PAGE not the SCREEN. Many answers I saw say things like absolute of fixed but that brings the footer to the bottom of the screen and in the middle of my page.
HTML
<div id="footer"></div>
CSS
#footer{
bottom: 0;
}
So to make the question short: How do I place a footer on the bottom of the page not screen.
do you think on sticky footer? :)
or you just want footer after content, just make
footer {
position: relative;
}
If you use position:absolute; the footer will be ON the other elements and will not follow the page's element order. Than, if you use position:fixed;, sure it will be in a FIXED position, and this is not your desired result.
So DONT USE position absolute or fixed;
If your footer is the last element of the page, it will be the last element of the page automatically.
If you get the html and can't modify it manually, you can do it with JS (and JQuery but it is possible without it): jsFiddle
$(function() {
$('body').append($('#footer').detach());
});
If you don't assign any style to your footer and keep it as the last element after your body content, it will remain at the bottom of the page.
Assuming your body content is too short to cover the full height of the page (for whatever reasons, maybe no content) but you still want to keep the footer at the bottom of the page, you can read this short tutorial or see the demo. If your content is longer than the viewport height, this footer will still remain at the bottom of the page and not fixed to viewport.
Basically you need to make the content or container above the footer to occupy 100% of the height of viewport. Then, place the footer after the content / container with the following CSS :
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
What happens here is that the footer will occupy 3em height but you 'pull' it back with the same value but negative margin-top. It's cleared to make sure there's no elements on both sides but you may exclude that.
Then, to prevent it from overlapping on your content, the container of content or content itself should have padding-bottom of the same value (in this case, 3em).
Here's my css rules:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
}
Using this example: http://getbootstrap.com/examples/sticky-footer/
I can make sticky footer without any issues, however there's one problem. How can i make content container to be full height 100%?
I want to fill this gray background color to the footer. How is that possible? I spent 8 hours already to figure out that. Please, help.
UPDATE
http://jsfiddle.net/3wh7d612/1/
Pay attention to div with class container2 i want to make it full height till the footer.
Amongst the newer responsive CSS selectors, my favorites are definitely vw (Viewport Width) and vh (Viewport Height). A lot of web designs that have come my way call for full page layouts with no containing max-width and no overflow of content that requires scrolling to view. These designs also feature vertical boxes that should collectively be visible within the viewport at the same time regardless of the browser’s height when scaled responsively. When researching to find a CSS solution to this, I stumbled upon the vh/vw units.
Maybe you can use it like this
.content {
min-height: 80vh; // Define based on your needs
}
At the site we are developing we have a main part (div main and mainholder) and this has always a maximum height of 770px. If the content in that part is higher then that it is cut of at the page, but we want the height to be automatically the same height as the content. So we do not want to give it a fixed height but it has to change automatically.
Change height: 100%; to min-height: 100%; for class .post
I am making a website. All the content is stored in a wrapper DIV. The content DIV has a border style assigned to it.
I want the height of the wrapper DIV to be tall enough to fit it's content, so the border goes to the end of the page.
I thought this would happen by default, as height:auto is the default value of all elements.
Here is my page.
Thanks for any help that can be offered.
Just make wrapper div style
overflow: auto
html {
height: 100%;
}
body {
/* not height: 100%; otherwise you're
* fixing it to the height of the viewport
*/
min-height: 100%;
}
.wrapper {
/* some kind of clearfix is
* necessary because your content
* is floated
*/
overflow: hidden;
}
If I understood you correctly you want to create a full height web site?
If so, try sticky footer.
Just use a div to nest contents and "do not" give it any height. By default, it will fit it's children. If necessary, you may give a display: block.
Here is the fiddle http://jsfiddle.net/8bP9b/
I want to have the content of my website centred but only for a certain width of a webpage. So when it's over say 500px I'd want the content to then be fixed, unable to stretch any further. Is there anyway to do that, or am I best having everything fixed? Hope that makes sense ill add some visuals to be a bit clearer..
thanks!
http://i38.photobucket.com/albums/e126/aaron123456/stackflow.jpg
1.auto margin with a certain space
2.so content doesn't float in the middle of a larger webpage
It's quite simple:
#container {
max-width: 500px;
}
#container > * {
margin: 1em auto;
width: 300px;
}
#container defines the maximum width, and every element placed inside it is aligned centered. I had to set the width to prevent these elements from requiring the entire width.
See it in action