Everything looks fine in both the HTML & CSS, so the div in question should be centered on the page. I have included some code snippets below, but the real code can be found here: http://jsfiddle.net/stbx08mk/
test-div at the bottom should be centered in the 1024 area, but it isn't. Why not?
#page-wrapper {
background-color: white;
margin: 0 auto;
overflow: auto;
padding: 0;
width: 1024px;
}
#test-div {
background-color: orange;
float: left;
height: 100px;
margin: 0 auto;
width: 800px;
}
Based on your fiddle, you need to adjust your #test-div style to float: none; and clear: both;
#test-div {
background-color: orange;
clear: both;
float: none;
height: 100px;
margin: 0 auto;
width: 800px;
}
Your JSFiddle Updated
floating divs to center "works" with the combination of display:inline-block and text-align:center.
First, remove the float attribute on the inner divs. Then, Text-align:center on the main outer div. And for the inner divs, display:inline-block.
Just tested it - display:inline-block on the inner divs works. Might also be wise to give them explicit widths too.
For your problem
Check this fiddle
Remove float:left; and add clear:both; to #test-div.
It just worked for me..
This will solve your problem
Try it..
The reason your #test-div is not centered, is because you're using the property float: left; on it in your CSS. The auto margins don't work on floated elements.
Try removing the float: left; property to get your desired result.
Float: left is whats making it ignore your margin: 0 auto;
Make sure your <html> and <body> tags take up the entire width of the browser and the margin and padding are both 0. This caused my content to be almost centered, but a little bit offset from center. Use this CSS:
html, body {
width: 100%;
margin: 0;
padding: 0;
}
In addition, in your #test-div use:
#test-div{
margin: 0 auto;
}
Related
i am working on an internal web page, the page have a wrapper DIV as recommended by a tutorial online.
inside the wrapper there is : header, mainnav, content, sidenav and footer.
The content and sidenav are two side by side DIVs .
The side bar contain a menu that is usually changed.
My problem is that i want to make the content DIV with the same height as the sidenav.
here is my CSS for the two DIVs
#content {
width: 75%;
float: left;
padding-top: 5px;
height: 100%;
}
#sidenav {
width: 25%;
float: right;
}
and this is the CSS for the wrapper
#wrapper {
background-color: #FFFFFF;
width: 100%;
min-width: 740px;
max-width: 1000px;
margin-right: auto;
margin-left: auto;
-webkit-box-shadow: 0px 1px 20px #999999;
box-shadow: 0px 1px 20px #999999;
}
Give both of them the following attribute:
height:100%;
They should fill the entire height of the wrapper div, if you give it a specific height. I'd also suggest adding another div after them, and then style it as below to prevent either from creeping past it:
width: 100%;
clear: both;
height 100% doesnt work if you dont have a parent with a defined height. I dont know why you want the same height? If it is for a background color just add it to your wrapper and overwrite the sidebar for example.
In the future you might want to checkout a framework to overcome problems like this. bootstrap is a good one to start with.
https://jsfiddle.net/dtz8cmnt/1/
.column {
float: left;
width: 33%;
}
.menu {
background:red;
}
.content {
background:blue;
}
.clear {
clear: both;
width: 100%;
}
In the Fiddle you find an example where a clear is used. Note that the colums do not have the same height.
I've tried to align last div element / elements using text-align-last property but it didn't work. I have much divs in the center, but my page is different on each resolution so I can't control if elements will be perfectly and none of them will be in last line alone or so, that's why I want to align them to left.
Fiddle: http://jsfiddle.net/ecn8c0pt/
Picture of my site:
Adding the following CSS will work.
http://jsfiddle.net/ecn8c0pt/1/
#gallery h2{
margin: 0;
height: 80px; /*Added height for the Heading */
font-size: 1.1em;
font-weight: 300;
color: #33CCFF;
}
.project{
display: inline-block;
margin: 0 15px 40px;
width: 156px; //To show in jsfiddle i reduced the width.
text-align: left;
float: left; //MUST CHANGE: Once you align left it will automatically float to left. Also the number of count per row will depends on the window width and div width.
}
.project .thumbnail{
width: 156px;//To show in jsfiddle i reduced the width.
height: 144px;
border-radius: 3px;
}
try adding styles to your CSS like these:
float:left;
min-width: 200px;
max-width: 200px;
and try to fix the width for the wrapping div tag
for example:
.wrapper {
width:1000px;
}
see in example DEMO and try to predict the width now when you control it good luck!
I am trying to make an image scroller and I am stuck with my CSS side of things. The current CSS that I have is making them going under each other not next to each other and I can't figure out how to make it work that way.
The Images are stored in a div of themselves which are under a another div called imageScroller and the imageScroller div is under the Content div.
Here is the CSS of the following divs
#content
{
text-align: center;
padding: 20px;
}
#imageScroller{
margin: 0 auto;
width: 850px;
height: 250px;
overflow: hidden;
}
.image{
float: left;
}
I think what you want is achieved by adding white-space: nowrap to #imageSlider and changing .image so that instead of float: left, it is display: inline-block.
Here's a fiddle. Adjust as needed.
The font-size: 0 in #imageSlider is to get rid of extra white space in between the <div>s.
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;
}
I want to center my web page footer and create a reasonable gab between it and the above content. Currently, the footer has a line and paragraph joined to the above content. I can push down the content but the line does not move. I am sure the property I am missing out in my css style sheet. Could someone help?
This is my html mark up:
<div id="footer">
<p>Copyright (c) 2010 mysite.com All rights reserved</p>
</div>
Which css property can I use to solve this problem? A sample would be appreciated. Thanks.
#footer{
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Center a div horizontally? Typically done by setting margin: 0 auto, or margin-left: auto; margin-right: auto.
And if you want a gap above it, give it a top margin.
Use margin:auto to centre blocks with CSS, and margin-top or padding-top to make a gap above it:
#footer {
margin-left:auto;
margin-right:auto;
margin-top:2em;
}
I've used 2em for the top margin; feel free to change that as you like, even to a fixed pixel size if you prefer. You can also use padding-top as well as or instead of margin-top, depending on exactly what you need to achieve, though the centering can only be done with margin left/right, not padding.
The above code can be condensed using the shorthand margin code, which lets you list them all in the same line of code:
#footer {
margin: 2px auto 0 auto;
}
(sequence is top, right, bottom, left)
hope that helps.
I solved it with this:
#footer {
width: 100%;
height: 28px;
border-top: 1px solid #E0E0E0;
position: absolute;
bottom: 0px;
left: 0px;
text-align: center;
}
You can center the text with the following CSS
#footer {
margin: 0 auto;
}
If you want more space on top add
margin-top: 2em;
after the previous margin line. Note that order matters, so if you have margin-top first it gets overwritten by margin rule.
More empty vertical spacing above the footer can also be made using
padding-top: 2em;
The difference between margin and padding can be read about W3C's CSS2 box model. The main point is that margin makes space above the div element's border as padding makes space inside the div. Which property to use depends from other page elements' properties.
I used this code for bottom copyright.
.footer-copyright {
padding-top:50px;
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#Panel01 {
vertical-align:bottom;
bottom: 0;
margin-left:auto;
margin-right:auto;
width: 400px;
height: 100px;
}
Notes:
#Panel1 is the id for a DIV and the above code is CSS.
It is important that the DIV is large enough to contain the items
within it.
#footer{
text-align:center
}
.copyright {
margin: 10px auto 0 auto;
width: 100%;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-style: normal;
text-align: center;
color: #ccbd92;
border-top: 1px solid #ccbd92;
}