I have a simple layout that consists of a #container with
#container {
width: 775px;
margin: 0 auto;
}
to center it on the page with a maximum width of 775px
Then inside of that I have another div whose width varies depending on the content inside of it
.innerdiv { margin: 0 auto; }
I want it so if the .innerdiv is less than 775px, it will center within that 775px region.
The problem is that the above code is not working. I've wrestled with it for a bit but can't figure out what I need to do to accomplish this.
Using “margin: 0 auto;” in Internet Explorer 8
...“margin: 0 auto” centers a block, but only when width of the block is set to be less that width of parent.
To align a div to center.. use margin: 0 auto; but you must specify the width attribute of the . width: 400px; that must be less than the parent container <div>
for more information follow this link Link
write like this:
#container {
width: 775px;
margin: 0 auto;
text-align:center;
}
.innerdiv {
display:inline-block;
*display:inline /* IE */
*zoom:1;/* IE */
text-align:left;
}
Check this
http://jsfiddle.net/efEgq/
Give relative position to #container
#container {
width: 775px;
margin: 0 auto;
position:relative;
}
try this.
Just write align="center" for innerdiv.
Related
Please help, I have been stuck on this. I found many solutions online but not of them work in my case.
I'm trying to center the table. Here is how it looks now:
HTML:
<div class="container">
<table id="multTable"></table>
</div>
CSS:
#multTable {
width: 100%;
margin: 0 auto;
display:block;
height: 200px;
overflow-x:scroll;
overflow-y:scroll;
}
I tried this:
.container {
width: 100%;
}
#multTable {
margin: 0 auto;
height: 200px;
overflow-x:scroll;
overflow-y:scroll;
}
But the table overflows the page size:
What am I doing wrong here?
In your initial try, your table won't be centered since you're trying to center something that is taking 100% of the possible space. Technically, it is centered, you just can't see it's taking the entire space.
So imagine if you have a container of 100px. There's a block inside of this container that you want to center. But you're setting this block to have 100px in width. There's just no gap to see!
So this won't work:
{
width: 100%;
margin: 0 auto;
}
Instead, you should give the centering element a fixed width:
width: 400px; /* or whatever is needed */
margin: 0 auto;
That way it has some space around it.
Here, check this out:
https://jsfiddle.net/9gwcjvp3/
have you tried this :
.container {
//
}
#multTable {
margin: 0 auto;
overflow-x:scroll;
overflow-y:scroll;
}
Make your container the full width of whatever it resides in. Then make the table and specify a max-width.
.container {
width: 100%;
}
#multTable {
max-width: 100%;
}
I would help more to see the rest of your hml.
Only add this
.container {
display: flex;
justify-content: center;
}
I am building a two column layout and I want to keep the total column inside a wrapper in the center of the screen even if it's resized. I have tried floating some CSS divs but not helping.
This is my layout:
<div class="wrapper"><div class="leftCol">Left</div><div class="rightCol">Right</div></div>
CSS:
.wrapper{ width:720px; text-align:centre;}
.leftCol{ width:200px; float:left;}
.rightCol{ width:510px; float:right;}
All you need to do is set the wrapper as such
CSS:
.wrapper { width:720px; margin:0px auto;}
Furthermore I would recommend using a bit more responsive CSS with percentage to fit with the width as well, so that it doesn't look really tiny on larger screens.
You can try the margin trick here on the wrapper class.
.wrapper{ width:720px; margin: 0 auto; }
Please try below css
.wrapper{ width:720px; text-align:centre; margin: 0 auto;}
.leftCol{ width: 30%; margin: 0 auto; display: inline-block;}
.rightCol{ width: 70%; margin: 0 auto; display: inline-block; }
Float removes your children DIV elements from a static document flow.
DIV elements being block-level elements, unless set as inline or inline-block will not in any case apply to the parent's text-align property.
You have more possibilities, the most common are:
.wrapper{
width: 720;
margin: 0 auto; /* keeps me centered */
overflow: auto; /* to contain floated child elements.
Or use a .clearfix http://nicolasgallagher.com/micro-clearfix-hack/ */
}
or using text-align: center;
.wrapper{
width: 720;
margin: 0 auto; /* keeps me centered (use anyways) */
text-align: center; /* my children are not block-level elements */
}
.leftCol{
display:inline-block;
width:200px;
/* text-align: left; probably you might want to reset text alignment */
}
.rightCol{
display: inline-block;
width:510px;
}
I would discourage you from using (in 2016.+) fixed widths. Use another more responsive unit like % or vw
I have the following Html code
<div id="team">
<h1>Team</h1>
<img src="assets/divider.png" id="divider">
<img src="assets/team.png" id="team_pic">
</div>
The following CSS
div#team {
margin: 0 auto;
margin-left:auto;
margin-right:auto;
right:auto;
left:auto;
}
However, the child elements divider and team pic are all the way to the left. I though margin:auto would center everything.
then I put the following into the child elements.
div#team img#team_pic {
width:704px;
height:462px;
margin-left:auto;
margin-left:auto;
}
Nope, nothing happen, the elements still to left and not centered.
You need to set a width to #team, for example:
div#team {
margin: 0 auto;
width: 800px;
}
... which is a shorthand version of:
div#team {
margin-top: 0;
margin-left: auto;
margin-bottom: 0;
margin-right: auto;
width: 800px;
}
Images are inline level elements by default. You need to use display:block; if you want your images and margin to work properly.
img{
display: block;
}
float will upset this too.. float:none; does the trick if you think it may be inheriting a 'float' directive from another rule somewhere.
Team needs to have a width to be able to use margin: auto.
div#team {
margin: 0 auto;
width: 400px;
}
Here is a fiddle: JS Fiddle
*Use the
display:block;
for the images classes.*
#team {
margin: auto;
width: 400px;
}
Basically margin depends on width if and only if we want to show our div in the center of the page.
If you donot want to give fixed width then we can go for width: max-content;
#team {
width: max-content;
margin: 0 auto;
}
so i have a normal 960px layout, i want to add a div that can use 300px inside that 960 and the rest of the space (browser width) i want to fill with that div...but always stay on the same position inside the wrapper (im not talking about a vertical fixed element)
can i do this without using javascript? but if theres isnt another option its ok
Example:
<div class="wrapper">
<div class="fill">Something</div>
</div>
CSS:
.wrapper {
margin: 0 auto;
width: 960px;
background: #ddd;
}
.fill {
margin: 300px 0 0 0;
width: 300px;
background: red;
}
thank you
If I well understood what you need: try this fiddle
http://jsfiddle.net/jGmcV/show/
http://jsfiddle.net/jGmcV/ (source)
this should be the effect, but I placed an extra wrapper around your wrapper. The width of red box inside the dark container is always of 300px no matter what the size of the viewport is.
You can use margin-left:-10%; and margin-right:-10%;
If i understood correctly.
or you can
.wrapper {
margin: 0 auto;
width: 960px;
background: #ddd;
position:relative;
}
.fill {
margin: 300px 0 0 0;
width: 300px;
background: red;
position:absolute;
top:0px;
left:-10%;
}
http://talk.thegoodhumor.com/
As you can see here, the height just isn't continuous and I have no idea why.
I've toyed with it for quite a while now, and I am still baffled.
First of all , margin: 0 auto; is used to center elements , it is also not possible to make a page with infinite height , but you can maximize it's height by using
.body{
text-align:center; /* IE Center trick because margin:0 auto; will not work. Go go IE! :D */
}
.wrapper{
min-height: 1080px;
height: 1080px;
width: 100%;
/* DO NOT RESTORE THE ALIGNMENT HERE --- */
}
.wrapper .div {
margin:0 auto; /*center the elements */
text-align: left; /* restore the alignment */
min-height: 100%; /* maximize the height; make it 1080 pixels */
height: 100%; /* not necessary but i like to add it as well :) */
}
margin: 0 auto; 0 means that there will be 0 space between the division and the element thats right above it and auto will adjust the right spacing to be the same with the left one :)
It goes like this margin: top right bottom left;