you can see my jsFiddle here http://jsfiddle.net/fcZQV/ where I posted the HTML and CSS of my page. You can see the result also in http://fiddle.jshell.net/fcZQV/show/ for better viewing example.
The #sidebar and #feed must come close and all of the page in the center of screen.
How can I do this? I tried margin:0 auto; but nothing...
Thank you for your help.
You should also set the width of the page. Then it will center inside that width.
margin: 0 auto; width: 980px;
Related
Here is the link to a site I am working on for a friend - http://jayclarkephotography.com/
I am trying to center the logo. I have tried various ways, but am new to making websites, so I think I am missing something.
On the a inside the header, add the following CSS:
display: block;
width: 340px;
margin: 0 auto;
You might want to ajust the padding of the header, because the logo is not dead center.
You can acheive this through CSS, tell the browser you want auto margins on the left and right, add this to the image tag
style="margin:0 auto;"
I want to position my webpage so that on zooming in or out, the webpage diminishes or increases in size from the center. For example while zooming in or out this website, the layout moves towards the center and away from it. I hope you understand
I think that you are talking about margin:0px auto;
All you have to do is add this to the body in CSS :-
body{
margin:0px auto;
}
Go to this link for further details :-
http://bluerobot.com/web/css/center1.html
I hope this helps...
.yourContainerClass{ margin:0 auto; width:1000px;}
I'm trying to get my footer to stop moving out of the way of other elements with the height of the browser decreases. Instead I'd just like it to stay put and be able to scroll down.
Here is a link to the page it is happening on:
http://fine-grain-2.myshopify.com/cart
Here is the CSS for my footer:
footer {
margin: 0 auto;
padding: 0 0 1em;
position: relative;
text-align: center;
}
Here is an example of what is happening:
GOOD
BAD
I've tried everything I know and looked at other websites with firebug that are doing this. Any help would be greatly appreciated.
All you need to do is add the following css:
clear:both;
Hard to tell without seeing the HTML and CSS but if you add clear:both; width:100%; to the footer it looks as though it will solve your issue from the screenshots.
I want to prevent my divs to float out of the browser window if you resize it. Look at this site, and resize the window, and you will see that the divs is floating out. See here. What is wrong? I have tried to set the divs inside a wrapper with no luck.
Thank you :)
There are a lot of things wrong with this page but heres a few things you should do (some not related to fixing the div issue)
Put all <link/> && <script/> && <style/> tags in the head for a start.
and the css you need (though you will probably tell me you want something more after you have applied this) is:
.content {
clear: both;
margin: 0 auto;
overflow: auto;
top: 100px;
width: 1000px;
}
I have searched the internet for countless hours looking for a solution and I can never seem to find it. What if I had a log in page and I wanted to have it completely centered in the center of the page.
I've never figured out how to do this and hopefully someone can help me put and end to this lack of knowledge of mine.
Here is an example
What I want is to have a div with a height of 410px and a width of 756px to be centered on the screen. So vertically and horizontally. I then want to be able to put other 's inside it with content. For example maybe I want to put a login page in there or a blog post or anything.
Major thanks in advance!
Use margin: auto;.
HTML:
<div class="middle">middle</div>
CSS:
.middle
{
width: 100px;
height: 50px;
border: solid 1px red;
margin: auto;
}
See this link for vertical centering.
Here's a fully working example.