I've been googling for around half an hour and still can't find a solution.
I have a website at the minute, which has quite a lot of divs. All of these have a width of 980px and it looks fine on it's own. My only problem is that if the screen is > 980px then it just appears on the left.
Question: Are there any tags I can put around the code which will center it? I've tried <center> and hoping for pot luck but it didn't work :(
Just wrap them in a container div and give it the same width PLUS:margin: 0 auto;
<div id="container" style="width:980px; margin:0 auto;">
....your divs
</div>
Of course move the styling to your CSS file, instead of using inline styling!
Assuming that you have not twiddled with float (which forces the element to the side), used absolute positioning (which takes elements out of normal flow), or stopped the element from displaying as a block:
Set margin-left: auto; margin-right: auto; or use the shorthand notation (margin: 0 auto) (where 0 is the top and bottom margin you want).
Make sure you have a Doctype that triggers standards mode (which you should use for all modern development anyway).
See this article for more details.
If the structure is flat - there are no nested divs then you can inlcude the following in your css file:
div {
margin-left: auto;
margin-right: auto;
}
Otherwise, just wrap all divs with a <div id="wrapper"></div> and put this in the css file:
div#wrapper {
margin-left: auto;
margin-right: auto;
}
Related
So, I have a few divs that i want to center.
I'm currently using this css code on something i call a "container div" - you've most likely heard this "container" thingy before.
#container {
margin: auto;
width: 75%;
margin-top: 100px;
}
Although this does not seem to center the divs when resizing the window; If I resize the window, the divs will follow slowly and by that -move further away from the center.
Fiddle - https://jsfiddle.net/kud3f01n/
What is causing the divs to behave like this?
As verified in your example, I've found that you made those blocks design by using margins(negative and high range values). Hence even you are giving main container width 75% or any other still it will overflow from the parent div. And this kind of CSS will create critical issues in smaller devices.
Suggestion: Try to avoid this type of CSS. And if you need this type alignment and it has t be work in responsive also you can some third party plugins such as masonry.js etc.,
Try this
#container {
height:50px;
width:50px;
position:absolute;
left:50%;
top:50%;
margin: 0 auto;
}
So i have this problem with parent element height 0px. I Know that parent element with floated children will have height 0, but nothing helps, and i don't know why. Some pictures and code samples:
<body>
<div class="article-container">
<article class="page-article">
<div class="title">...</div>
</article>
</div>
<aside>
<div>...</div>
</aside>
</body>
/*CSS*/
body,html{
padding:0;
margin:0;
text-align:center;
}
aside{
float: left;
width: 25%;
}
.article-container{
width:73%;
float:right;
padding: 0px 1%;
}
.page-article{
width: 90%;
display: inline-block;
overflow: hidden;
float:none;
}
chrome tells me this:
I used clearfix and that didn't help,
css-tricks - didn't help
Why is my div's height zero - didn't help
Also i've been adding 100% width divs at the end of the container with floated elements and that did help(a little), but after window resize everything crashed again. (chrome kept telling height: 0px; even before window resize)
I noticed that <aside> keeps the height, but the '.article-container' don't.
I don't know what to do next...
EDIT:
Maybe For some of people like me, that clearfix, adding spans, divs, setting overflow to hidden, setting float to the parent element Didn't help, I actually find another problem that may cause such a behaviour.
Check if your jquery or javascript doesn't use a parent element. In my case:
I am using masonry layout. > It works by placing elements in optimal position based on available vertical space.
I set it to two columns for some pages to display posts but also by mistake i've been using it on pages when wanted to have just one column and everthing crashed but none errors occured.
Thanks #syllabix for giving me right direction
Problem Solved
I know that I can use the settings margin: 0 auto; to position an element at the center of its container
For example I could have something like:
<body>
<div id="container">
<p>SOMETHING</p>
</div>
</body>
and the related CSS that put the div having id "container" at the center of the page (at the center of its container that is the bosy element):
#container {
margin: 0 auto;
width: 770px; /* Imposto la larghezza */
}
Ok,
this is clear for me but I have some doubts related to the previous CSS code:
1) Now I am using a fixed dimension template (I declare explicitally the dimension in px), can I use this policy also for liquid template (where I don't declare the dimension in px, but in %) or have I some problem?
2) What is the exact meaning of margin: 0 auto;? It only means: "position an element at the center of its container" ore it have some more specific meaning?
Tnx
Andrea
My site (profile) uses dynamic (e.g. liquid) layout, at least width wise (it gets a bit excessive for dynamic height).
To answer the first part of your question you certainly can center things in a dynamic/liquid layout and you can use margin: 0 auto;. I typically use the following for centering anything...
.center
{
margin-left: auto;
margin-right: auto;
text-align: center;
}
One of the problems you will encounter with other people's CSS is that I've noticed a lot of people have no idea how to use CSS1 and just spam CSS2 position which will mess everything up even if you've half converted it back to CSS1. Position should be limited to no more than about five or six instances on an entire page unless you're dealing with some really data-heavy layouts and usually this is for SEO to keep the content at the top in the (X)HTML code (again like my site) but visually have the menus at the top.
I've written a CSS1 tutorial that may help if you understand CSS1 which in turn may help you clean out styling issues by others.
To answer the second part of your question when you use margin: 0 auto; (this is called CSS shorthand) you are effectively writing...
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
To make it really clear another example using margin: 20ox 10px; you are effectively writing...
margin-top: 20px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;
If you make a quick HTML file and open it with Firefox/Firebug and look at the left panel HTML tab / right panel "layout" tab it will show you how the measurement of an element is calculated from any given code.
If you have questions please comment and I'll be happy to update my answer as needed.
Today I came across a very nasty problem, I need to make the front-end layout for a website and it has a certain design element on the page that puzzled (even) me.
Now I am not exactly unfamiliar with html, css positioning, making layouts etc, so please don't make 'guesses' as to how I could solve it. I want a working example.
Here is a jsfiddle with my code and problem:
http://jsfiddle.net/sg3s/A9vzA/ http://jsfiddle.net/sg3s/A9vzA/15/
What is currently happening;
The #container has a min-height of 100% (red background) width of 970px. This is the width the page must have as a minimum. The #top (lightbrown background) div is irrelevant for the problem but part of the design.
The problem lies in #header (purple background) which currently has a width of 1022px (too wide for 1024px resolution + a scrollbar, even with a maximized window) and a negative left margin to keep it centered on the container, which is what needs to happen. When the width of the screen width falls below 1022px a horizontal scrollbar apears as the thinnest element on the page is 1022px wide. (its behaviour is the same with position absolute and a negative left offset)
What I want to have happening;
I want the 'overflow' of #header over #container to dissapear into the sides and only get a scroll bar as the viewport gets below 970px wide. (If someone can rephrase this )
Let me be a little bit clearer on this:
The 100% height layout needs to stay and be compatible with IE7+
The header needs to be centered over the container, this is the reason it is inside it in my example but be my guest to take it out if that solves the problem.
My example looks and acts correct as long as the viewport is large enough to accomedate the header.
The trick is to make it look and act the same while the sides of header overflow into the sides of the viewport when the viewport is too slim to fit that header.
Updated the example to make the change / centring a bit more obvious.
If possible I want the layout to support all the way down to IE6 though IE7+ will be fine. The final page will prompt to install Chrome Frame anyway. And ofcourse don't forget about Chrome, FF 3.5+.. (Opera?). Use of JS will not be acceptable, unless you can convince me that there is absolutely no other way, but jQuery will be present on the page.
Thank you for at least trying! (Challenge yourself! :D)
This code worked for me in FF/Chrome/Safari/Opera. Can't test in IE because I'm on Mac now, but must work in IE 7+
Example: http://jsfiddle.net/XVraD/3/
Base idea is to wrap #header in another container with "width: 100%; min-width: 970px;" and place in outside of #container, so it will do all the overflow to you.
EDIT 2: Solution that works in IE6: http://jsfiddle.net/XVraD/9/
EDIT 3: This version is fixed to have height 100% in modern browsers and old IE's: http://jsfiddle.net/XVraD/9/
It is a hard one, the only real solution I can come up with is this that you use Media queries like this:
#media all and (min-width: 970px) {
body, html {
overflow-x: hidden;
}
}
It is not supported by old browsers, there you would need a Javascript!
As far as I can tell, the best solution would be to restructure your HTML to put your header outside of the container.
<div class="outer">
<div class="header">
...
</div>
<div class="container">
...
</div>
</div>
CSS:
.outer { ... }
.header {
max-width: 1022px;
min-width: 970px;
margin: 0 auto; }
.container {
width: 970px;
margin: 0 auto; }
Demo: http://jsfiddle.net/Wexcode/tJXHF/
http://jsfiddle.net/QrVJJ/
#header is positioned outside and above (with z-index) #top. It also gets margin: 0 auto; and the background is positioned top center with min-width:970px and max-width:1022px.
#header {
margin: 0 auto;
z-index:5;
min-width: 970px;
max-width: 1022px;
height: 201px;
background: #390419;
overflow:hidden;
background: transparent url(http://4.bp.blogspot.com/_rScBRKlTdoE/TC6rNWAyD9I/AAAAAAABOTo/BWkJH9ymovo/s1600/IMG_9692.jpg) no-repeat top center;
}
How about setting the header to have a min-width of 970px and a max-width of 1022px? There are ie hacks to make min and max width work. This would make make scrollbars appear after the viewport shrinks to below 970 and as you stretch the viewport the header would grow up until 1022 after which it would stay 1022.
Having this one in Chrome.
http://jsfiddle.net/A9vzA/10/
Put an inner div inside the #header
The header has position relative and no float and with 970px
The inner div has position fixed and width 1022px and margin 0 -26px
--edit
but doesnot work in IE7
--edit
this works in IE7, too http://jsfiddle.net/A9vzA/11/ just add another inner div
The first inner div is position fixed and width 100% and text-align center
The second inner div is margin 0 auto and width 1022px
Can anyone test it in IE6
--edit
nope doesnot work if you got content in your #container. position fixed is no option
Is this what you're after:
http://jsfiddle.net/HbxTQ/8/
Fullscreen:
http://jsfiddle.net/HbxTQ/8/embedded/result/
(I've not yet made it cross-browser, only tested it in Chrome. What to ensure I have the idea right first.)
sg3s, you sound like a tough customer but I thought I'd throw my hat in the ring. None of us understands exactly what you need so please post the flattened design.
My assumption is that you need one or two layers with adjustable width behind a fixed 960px content container. Using float on adjustable width containers is going to make it nearly impossible to do what you want. Instead, use postion: absolute for a container holder (a.k.a. wrapper) and position: relative for the inner content containers. No Javascript is necessary.
My recommendation is removing #header from the primary #content container and separating the background image from the #header so they can be rendered and positioned independently.
http://jsfiddle.net/dylanvalade/ZcejP/
I am attempting to center my entire page using only CSS and it is proving more complicated than i first expected. Currently my code works in IE but not in Firefox which makes a change. The page can be seen here. Below is the code portion involved:
#wrap {
width: 960px;
margin: 0 auto;
padding: 6px;
background: #FFFFFF;
}
The structure of my HTML is:
<body>
<div id="wrap">
Gubbins in here.
</div>
</body>
It seems that in Firefox everything following the wrap div is be created outside of it. This is problem is resolved if i add a 'float: left' to the wrap div but then obviously everything floats left rather than center.
Any help would be greatly appreciated.
Change your markup to
<body>
<div id="wrap">
Gubbins in here.
</div>
</body>
EDIT: Looking at the link, you've already done that. You'll want to either add overflow:auto; to #wrap or add a clearing div at the end just before the closing tag on the wrap div.
Also, on your example page, the wrap div is missing its closing tag.
Use this CSS:
body { text-align:center;}
#wrap {text-align:left; margin: 0 auto; width:960px;}
Then, let's examine this statement from your question:
everything following the wrap div is be created outside of it
That's kind of the way it works. Don't put anything outside of your wrap div. Think of it as a surrogate body.
If you know the width of your page - and it's fixed, you can use the following methodology.
Contain your page content with a div (which will act as a wrapper)
Give this 'wrapper' div a width of 'W'
Position the wrapper div using 'left: 50%;'
now, utilising the fact that it's possible to have a negative margin...
Pull back the positioning of the wrapper div using 'margin-left: -(W/2);'