i am having a problem with my website on Widescreens on Firefox/Chrome. It's not centred for some reason, margin: 0 auto; is not working either. The website looks fine on normal screens or even wide screens with lower res but on 1900x1200 the content is not centered for some reason. However the website looks fine on IE 9 at 1900x1200.
Here is the code:
jsfiddle.net/hXskH/
Any clues?
For it to be centered you need to add a width along with that margin: 0 auto; Most common width is 960px;
#main {
padding-bottom: 300px;
margin:0 auto;
position: relative;
width: 960px;
}
You have not set width for #main, so as it is block level it has occupied full width ie 100%.
Set the width for element.
#main {
padding-bottom: 300px;
margin:0 auto;
width:<your-width>;
position: relative;
}
Related
My website uses this code for width and it is shown perfectly on a 15.6 inch screen, but for mobile screens and netbook & tablet screens of 10 inch, the website is completely messed up. It uses a fixed width, I tried to make it auto, 100px but no success. here is the css code:
#container {
width: 1180px;
margin: 5px auto;
text-align: left;
background-color:#FFF;
}
Website is HERE
there is a background image and container is placed over it. How to modify this code to have auto width for different screens?
PS: Script is opencart.
Try using a percent rather than a fixed width in your CSS.
#container
{
width: 95%;
margin: 5px auto;
text-align: left;
background-color:#FFF;
}
If you want to use different CSS depending on the device it is being viewed on, your best bet is to use Media Queries as suggested by #Ruddy
Try this below css.. ( for all width apply in max-with:100% )
#container {
width: 1180px;
max-width: 100%;
margin: 5px auto;
text-align: left;
background-color:#FFF;
}
I want to make a div (my sidebar) stretch to the bottom of the page. I know that I need to add "height: 100%;" in order to do that.
But when I add height: 100%;, pages that have less content than the sidebar cuts the sidebar's height and then you can't see the sidebar content.
This is the index page . Everything looks exactly the way I want it to.
This is a sample page . Notice that the sidebar has been cut.
CSS:
#menu-container {
background-image: url('floral.png');
width: 300px;
display: inline-block;
vertical-align: top;
height: 100%;
overflow: hidden;
position: absolute;
}
#menu {
background-image: url('menubg.png');
width: 220px;
margin: 0;
padding-top: 50px;
padding-left: 30px;
padding-right: 20px;
color: #e8e8e8;
height: 100%;
}
#content {
padding: 0px 0px 30px 325px;
width: 1000px;
display: inline-block;
vertical-align: top;
}
Thanks in advance!
* #Ritabrata Gautam *
The changed CSS fixed my second problem but now I'm back to the cut off sidebar on shorter pages: See here: http://www.tarawilder.com/staging/?page_id=19
I'm leaving my house now, I'll be able to respond later tonight. Thanks again for your help!
#container {
display: inline-block;
height: 100%;
position: absolute;
width: 900px;
}
try this..it will give you the result you want..though there are many other mistakes in your html markup
some other areas where you need to be careful...
your container's width is 900px..which contains side menu and the large text...combined width of your side menu and the large text is far greater than your 900px width of your container..as you are not using overflow:hidden; you cant see the effect...why dont you apply overflow:auto; width:100% or something like that
BETTER CSS::
#container {
height: 100%;
width: 100%;
overflow: auto;
position: absolute;
}
ACCORDING TO YOUR NEW PROBLEM :: now your body height must be more than 100% now..thats why after 100% height your side menu becomes invisible
CHANGED CSS ::
#container {
height: auto;
overflow: hidden;
position: absolute;
width: 100%;
}
your third problem ::
strange...you are now using width:100% for your cantainer..and your container contains side menu and large text...and side menu has width of 300px and then your having width of 1000px for large text..so naturally the overflowed part ot the text gets invisible; and also remove position:absolute; from container
now your css
#container {
height: auto;
overflow: hidden;
width: 100%;
}
#content {
padding: 0px 0px 30px 325px;
vertical-align: top;
}
NOTE:: don't delete your edited part of your question..you have already deleted the 2nd edit you made to your question earlier...it will create difficulties for future users to relate the answer with question
Make sure that your parent containers (#container, body, html) are height:100%; as well.
Personally, I would do something like this(if the rest of the site layout allows it):
Instead of creating separate backgrounds for #menu, #menu-caontainer and body i would create background on body something like this: http://cl.ly/image/3L060f2w3Z0s
that would repeat vertically on y axis, so no matter how high the body is the background would stretch/repeat to the bottom.
Website in question: http://www.flowersbe.com
So I am not having an issue getting the footer to stick to the bottom, my issue is that I have a top margin on my container that pushes the footer down 25px past the bottom of the browser, which is most evident on the contact page of the above site. I want to keep the 25px space at the top but I still want the footer to be fully visible...below is my css for the container and the footer...any ideas on how I can resolve this issue?
html,
body {
height: 100%;
}
#container {
width: 960px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 25px auto -50px;
background-color: #fff;
}
footer {
clear: both;
width: 960px;
height: 35px;
margin: 0 auto;
padding: 15px 0 0 0;
background-color: #ffebeb;
text-align: center;
}
.push {
height: 50px;
}
I believe that to achieve exactly what you want to do, you would have to introduce some JavaScript to calculate the exact height that #container should be.
It is translating the height of 100% to the exact height of the viewport, then adding the 25px margin on top of that. The only way I can think of to get around that is to use JavaScript to get the height of the viewport and set the height of #container to that value minus 25px.
Possible alternate solutions that don't involve JS:
Just drop the min-height and allow #container to be only as tall as it needs to be.
Use position: fixed on the footer to ensure that the footer is always at the bottom of the viewport, but note that it would sit on top of any content long enough to go beyond the height of the viewport.
Does that give you enough to go on?
I know there are a lot of questions about a css 100% height problem.
However I've tried to follow the instructions there and still the height isn't 100%,
so I thought I'd ask the question again.
The site where you can see the problem is:
www.exendo.be
some css styles:
html {
height: auto !important;
margin: 0;
min-height: 100%;
padding: 0;
}
body {
background: url("/wp-content/uploads/2011/06/bg.png") repeat-x scroll 0 100px #F2F7E8;
height: auto !important;
margin: 0;
min-height: 100%;
padding: 0;
width: 100%;
}
wrapper {
height: auto !important;
min-height: 100%;
position: relative;
}
footer-container {
background: url("/wp-content/uploads/2011/06/exendo-footer_bg.png") no-repeat scroll center bottom #557F40;
height:146px;
}
As you can see on the site, the footer is too high on the page.
If I inspect the page with Firebug, I can see that the html is 100% height, but the body tag isn't.
The problem both occurs on Firefox and IE.
If anybody could help that would be great!
A number of people suggested position:absolute; bottom:0;
This can cause an issue if the content is taller than the container. The height will not increase so the content will no longer fit and can get cut off or result in ugly scroll bars.
If you can give a fixed height to the container, this is ideal since the height:100% will then work on the child element. In case the content is too large, you can put a background on the child with overflow:visible on the parent, so the content still displays. This helps, but it can still break unless the child is the same width as the parent.
If that doesn't work, I recommend using min-height in em or pixels. This will make sure the height fills the parent, and expands if the content is too long. This worked best for customer comments on www.baka.ca
I think this article can help you.
According to this article:
Assign "position:relative" to your "container" div - page, page-container, or wrapper (I'm not sure to which one of the three, just try), and then "position:absolute; bottom:0;" to your "footer-container" div.
I hope that helps you.
#denappel; give html & body 100% height put footer outside of your main div wrapper & give margin-bottom in minus according to the height of footer.
css:
.wrapper {
position: relative;
width: 700px;
font-size: 0.9em;
margin: 0 auto -142px;
background:yellow;
}
.header {
height: 190px;
background:green;
}
.footer {
position: relative;
width: 700px;
margin: 0 auto;
background:red;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
.footer, .push {
height: 142px;
}
check this example
http://jsfiddle.net/sandeep/tCdPX/3/
this functionally called stickyfooter
I would like to display all my content in a div that is 800px wide, centred in the page. That way, all browser window widths are catered for. How do I go about doing that?
Set your div CSS as follows:
#container {
width: 800px;
margin: 0 auto;
}
I would also recommend adding text-align:left; to the container div and adding text-align:center; to the body tag. Reason being that Internet Explorer 6.0 will not handle the auto margins.
body {
text-align:center;}
#container {
margin: 0px auto;
text-align:left;
width: 800px;}