This will probably turn out to be a trivial issue, but I'm trying to center all my divs inside a container, but no matter what I try with the auto margins, everything is still aligned to the left of the page.
Anyone know what's going on?
Stuck it on jsfiddle too:
http://jsfiddle.net/eLogy4nh/
#page-container {
margin: 0px auto;
}
Any help would be awesome chaps.
You #page-container block has 100% width by default, so the margin: 0 auto will not do anything.
However, your block level child elements can be centered, for example:
#main-nav {
background: grey;
height: 30px;
width: 90%;
margin: 0 auto;
}
You need to apply the margin: 0 auto to each container that you want centered within your #page-container parent block.
You can do this many ways with CSS, either apply the same rule to each block that needs to be centered or create a CSS class with the centering rule and then apply the class to each block, for example:
#page-container > div {
margin: 0 auto;
}
Note that a simpler way of getting a similar result would be to set the width of #page-container to 90% and let the child elements take on the full width of the parent block.
However, both techniques are valid and the one to pick may depend on other design and layout considerations, for example, the use of background images and so on.
See demo fiddle at: http://jsfiddle.net/audetwebdesign/resqhsoe/
Looks like this has already been answered above...
But to center an item it will need a width, without one a block element will contain 100% of the available space.
#page-container {
width: 70%;
margin: 0px auto;
}
Related
I am a bite confused on what is happening here. I put my body margin set to 0 in my css and then all the div elements stretch across the screen like I want, but I want this to apply for only one. From a previous question: HTML Image going across entire screen
An answer said to use position:absolute and then change the position of the div elements. I used to have position:relative on these div elements and when I changed that to absolute, it combined all the div elements in one position. I tried moving them with bottom:then whatever pixels, but still did not move it at all. Would this be the way to move it? What would I do? On W3 schools: http://www.w3schools.com/css/css_positioning.asp
It tells me a lot about positioning div elements, but when I tried to use this it did not work on one div element I tried, but instead overlapped it.
How would I move these div elements?
Code CSS
#middle-4{
position:absolute;
left:0;
right:8;
bottom:0;
top:-800px;}
Code HTML
<div id="middle-4" style="background-image: url(images/Home/rock.png); height: 540px; width: 1348px; border: 1px solid black;"></div>
This is done so for as you can see up to 4 div elements.
If I understand your question correctly you want all element to conform to the default body margin except one element (or multiple elements using a class).
I would do it like this...
Give body a specific margin to ensure it is consistent across browsers.
Use negative horizontal margins to pull your element outside of the constraints of body
body {
margin: 8px;
background: lightGreen;
}
div {
background: lightBlue;
padding: 30px;
border-bottom: 1px solid blue;
}
.fullwidth {
margin-left: -8px;
margin-right: -8px;
}
<div>I'm constrained by body</div>
<div class="fullwidth">I'm full width</div>
<div>I'm constrained by body</div>
Setting margin on body only ensures cross-browser consistency as mentioned by uʍopǝpısdn
If you have 4 divs containing an image each, you should stick to position: relative - this will line up the divs / images vertically on top of each other.
Your issue might have to do with image sizes - if you want all images to keep their original size, you can keep their attributes for width and height as specified in your example "middle-4": height: 540px; width: 1348px;
However - do you want one div / image to stretch across the width of body / screen, you will have to apply the size in percentage - this can be done in 2 ways:
CSS3 - you have the options of "cover" or "contain", which can be applied to div as youre doing it now - example:
div {
background: url(images/Home/rock.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
CSS2 - you can apply a class to the image itself, and forget about the surrounding div - example:
<img src="images/Home/rock.png" class="img_width" />
.img_width {
width: 100%;
height: auto;
}
So I was working on a website when I came across the problem of my footer not staying at the bottom of my container div (the footer was not inside of the container, it was placed after it in the HTML). I realized this was because some of the child divs were floated, so I had to put overflow:auto on the container--HOWEVER, because I needed the children to have percentage heights, I had the height at 100%, and as you probably know overflow:auto + specified height = scrollbar. But having just a min-height wouldn't allow the child divs to get their height. Having both certainly doesn't work.
I recreated the problem in some separate testing files, getting rid of all the unnecessary CSS (although I'm sure some still remains) so I could visualize the problem without clutter. It's on this JSFiddle currently. I have the height commented out currently, because ideally I won't be using it.
Here's my container div CSS:
#container {
position: relative;
width: 70%;
/*height:100%;*/
min-height: 100%;
overflow: auto;
margin: 0 auto;
background-color:#FFDA8A;
}
And one of the child divs that needs a percentage height:
.featured {
position: relative;
width: 100%;
height: 50%;
background-color:red;
}
EDIT: I want to add that I know why this is happening, rather that I was wondering if anybody has stumbled upon a CSS-only way of dealing with it. If it can't be percentages, then I'll look into flex-boxes instead (as mentioned by PiniH, thanks!).
It's an old question, with no really good answer, usually when stuff get like this, you should use flex boxes in the end, the min-height property will not affect the children, unless it's a table, and then it gets a mess.
You can add:
#container {
position: relative;
width: 70%;
/*height:100%;*/
min-height: 100%;
height: 1px;
overflow: auto;
margin: 0 auto;
background-color:#FFDA8A;
}
But then it won't grow which I guess is why you used min-height in the first place.
I have been boggling my mind around this for a while, eventually I think flex is the only answer in this case.
I'm in the process of learning css and js, and I was looking at this nice looking navigation bar
http://codepen.io/atelierbram/pen/gCqDy
however, when I set it up on a test website I cannot get the navigation bar to center. text-align doesn't do anything, setting margin:auto; seems to have no effect either. What's going on in this that I can't center the navigation bar by normal means?
In that example, #fancy-nav is actually floated to the right with a width of 50%. It appears to be centered, but it's not a traditional method for centering.
To use the margin:auto method, you'll need to give your HTML element some width, for example:
#nav-wrap {
width: 200px;
margin: 0 auto;
}
Of course, this simple example eliminates the dynamic sizing of the container, so it's really not all that useful if you're looking for a dynamic layout. There are plenty of resources available that talk about dynamically centering dynamic divs.
Change the #fancy-nav style to margin it for the middle position by using margin:0 auto and remove the float:right property
#fancy-nav {
margin:0 auto;
position: relative;
width: 50%;
}
Check it here
add this css
#fancy-nav{
display: table;
margin: 0 auto;
position: relative;
}
How to horizontally center a div of 10000px (or others wider than full screen) in CSS?
e.g.
#widerdiv{
width:10000px;
height:100px;
border:#009933 1px solid;
}
it seems "margin: 0 auto" doesn't work in this situation
Try add similar to
position: absolute;
left: 50%;
margin-left: -5000px;
As ridiculous of a width as that is.. I have two solutions for you.
The margin won't work because it has nothing to align itself with so here are two possibilities.
First Solution: Use a div to wrap it. The JsFiddle and the code below:
<div id="wrapper">
<div id="widerdiv"></div>
</div>
CSS for first solution
#wrapper{
width: 1000px
}
#widerdiv {
width:500px;
height:100px;
border:#009933 1px solid;
margin: 0 auto;
}
Second Solution: Define your body width. The JsFiddle and the code below(which is only CSS because I would not have modified your HTML) :
body{
width: 1000px
}
#widerdiv {
width:500px;
height:100px;
border:#009933 1px solid;
margin: 0 auto;
}
Now, by all means necessary, you can make that width as big as you want (heaven forbid the horizontal scrolling...) but if you play with those JsFiddles, you are going to realize that you absolutely need to define a width of whatever this Div is inside of.
Last, the Almanac is going to be your friend on this one. And as a quick breakdown, incase you decide to try vertical positioning, this is what happens when you use 'margin: 0 auto;' in CSS:
"The element is given a specified width
The left and right margins are set to auto
Without the specified width, the auto values would
essentially have no effect, setting the left and right
margins to 0 or else to whatever is the available space
inside the parent element.
It should also be pointed out that auto is useful
only for horizontal centering, and so using auto for
top and bottom margins will not center an element horizontally,
which can be confusing for beginners."
The quote above is also referenced in the Almanac.
I'm currently trying to center an horizontally, as in the object (box if you will) itself, not the text inside. I've tried many suggestions and followed many tutorials, yet nothing works... I finally ended up setting the margins myself, but I'd like it to adjust itself dynamically. This is the code I currently have:
.navbar {
margin:auto;
margin-left:30em;
display:none;
position:fixed;
top:0px;
list-style-type:none;
padding:0;
overflow:hidden;
z-index:200;
}
.navbar li {
float: left;
display:inline;
width:120px;
text-align:center;
}
.navbar #left {
left:0px;
width:100px;
height:35px;
background:url('res/navigation.png') 0 0;
}
... and so on. The html is really simple, just the list with the corresponding class and id attributes.
The proposed by many solution to set margin: 0 auto; doesn't work because you've got position: fixed; on your ul ;)
To my mind a good way of centering positioned elements is this:
.someelement{
width: 600px;
position: fixed;
left: 50%;
margin-left: -300px; //here we put half of the element's width
}
A live example of this method can be seen here: http://jsfiddle.net/skip405/G8LrV/
The only problem with this method is that we set the fixed width.
If you have an element whose width may change - you'll probably have to calculate it dynamically by jQuery, for instance, and then set the negative margin.
A live example of it can be seen here: http://jsfiddle.net/skip405/G8LrV/1/
Centering with CSS requires using margin: 0 auto -- as others have mentioned, and as I think you've already tried.
The reason this may not have worked for you is that it also requires the object to have a defined width and to have a block type display property (ie either display:block or display:inline-block).
It needs to be a block because only blocks can be manipulated in this way.
And it needs to have width because blocks default to 100% of the width of their container, which obviously leaves no room for it to be centered. The width can be a percentage rather than px if you want it to adapt to the size of the container, but it must be set.
If you're still struggling with it, try using Firebug (or similar) and examine what the browser thinks it's doing with the box. You may spot the problem here.
And if that doesn't help, create a JSFiddle example; this will help you see what's going on, and also give you something to show here.
It's a bit tricky, and you'll have to put the <ul> into a container. Then use the following css:
div {
text-align: center;
}
ul {
text-align: left;
display: inline-block;
width: auto;
}
Where div is the container around ul.
See this fiddle for live demo
You need to set an explicit width in order for the margin:0 auto to work.
Alternatively you can use some position trickery, as seen here, for when the width is an unknown.
And you'll need to remove display:none from .navbar or you won't see anything; unless there's some other code at work that isn't included.
to center a div relative to its container you need to do
width:75%;
margin-left:auto;
margin-right:auto;
that way the object centers itself.
You can try putting the .navbar in a container using section or div then set the display property of the container to flex then justify-content property to center and giving the navbar a specific width. Something like this:
section or code{display: flex; justify-content: center; width: 300px;
Put the .navbar in a container using section or div then set the display property of the container to flex then justify-content property to center and giving the navbar a specific width. Something like this:
section or code {
display: flex;
justify-content: center;
width: 300px;
}