.DOC {
display:block;
margin-left:auto;
margin-right:auto;
width:1265px;
}
.DOC is a div inside the body tag, but it's not centering. Why is this?
Your width is potentially the problem. Try setting it to something small for development purposes such as 100px.
See here, http://jsfiddle.net/tJd5M/
.DOC {
display:block;
margin: 0 auto;
width:100px;
background:orange;
}
That should work
see http://jsfiddle.net/yWkyE/
.DOC
{
width:100px;
height:100px;
margin:0 auto;
background-color:#000000;
}
Is there any other CSS in play on the page that might be affecting this DIV? What's your HTML like, could you provide a sample?
Your Style works fine for me...
Adding Border will show is the Div in Center of the page or Not...
.DOC {
display:block;
margin-left:auto;
margin-right:auto;
width:1265px;
border:1px solid red;
}
and if you want to align the Content of Div to Center then try the below style
.DOC {
display:block;
margin-left:auto;
margin-right:auto;
width:1265px;
border:1px solid red;
text-align: center;
}
HTML
<div class="DOC">Sample Text</div>
Better you decrease your width and try.... it will show the Accuracy
Related
This is my css code:
* {
box-sizing:border-box;
}
body {
font-family:Raleway, sans-serif;
text-decoration:none;
line-height:1.42857143;
margin:0;
}
html {
position:relative;
min-height:100%;
}
.wrapper {
width:960px;
margin-left:auto;
margin-right:auto;
}
JSfiddle:
http://jsfiddle.net/yb2sLhox/
I need page like same margin such as header, content and footer. left and right side margin should be same space.. like this http://postimg.org/image/ojhkt7bg3/a099ed23/
When resizing the window is working correctly. I think in content part need to change it.
Can anybody help me?
You can try adding padding to your section
section{
padding: 0px 30px;
}
OR
Try adding some width to your section like this
section{
width:90%;
margin:auto;
}
DEMO
I've seen several similar questions/answers to this problem on SO but none of the answers that I've checked have helped me.
I'm attempting to have a "Side-Bar" extend from 10px less than the top of the page, all the way to the bottom.
However (when using height:100%), the "Side-Bar" only reaches to the bottom of the loaded browser window, if there is content past the browser window that you scroll down to, the "Side-Bar" ends prematurely.
Basically, its height is only 100% of the browser window, I desire it to be 100% of the full page content.
I've created a JSFiddle that shows my problem:
http://jsfiddle.net/qaEzz/1/
My CSS:
#sidebar {
position:absolute;
right:8px;
width:200px;
height:100%;
overflow:hidden;
background-color: yellow;
}
i put the <div id="sidebar"></div>
into the <div id="content">
and added in the css
#topbar {
width:100%; <--this
height:20px;
background-color: red;
}
and this
#sidebar {
position:absolute;
right:16px; <--! extended to 16 px
width:200px;
height:100%;
overflow:hidden;
margin-top:-10px; <--!
background-color: yellow;
}
#content {
position: absolute;<--! and remove the marging: 10px just add a <br> in the html
width:100%
}
Here is the working Fiddle
If you change position:absolute; to position:fixed;, then it would stick to its position on the right.
For a sidebar that might have a longer length than the browser length itself, instead of the position attribute, use the float attribute.
http://jsfiddle.net/wK2Yh/
#sidebar {
float:right;
right:8px;
width:200px;
height:100%;
overflow:hidden;
background-color: yellow;
}
I'm working on the following layout structure:
<div id="wrapper">
<div id="header"></div>
<div id="pageContainer"></div>
<div id="footer"></div>
</div>
With the following CSS I set the footer to the bottom of the page:
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#pageContainer {
padding:10px;
padding-bottom:60px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#6cf;
}
If the content in the 'pageContainer div' is small, I don't want to show the scroll bars in the div but attach the footer to the bottom of the 'pageContainer div' (right not the footer is always at the bottom of the viewport)
If the content of the 'pageContainer div' is long I need the footer to remain visible in the viewport (at the bottom) and show the scroll bars in the 'pageContainer div'.
How do I do this? Any ideas? thanks!
PS: I need a solution that doesn't use JS.
If I read you correctly, you're describing behavior where positioning switches from relative to fixed, depending on the size of an element relative to the real-estate available in the viewport.
Quite certainly, you cannot achieve this without JavaScript.
But a solution where the footer is always at the bottom of the viewport is fairly common and easy to do without JavaScript. In case you do not already know how to do that:
#header, #pageContainer, #footer{
position:fixed;
left:0px;
right:0px;
}
#header{
top:0px;
height:100px;
background:#ff0;
}
#pageContainer {
top:100px;
bottom:60px;
overflow:auto;
}
#footer {
bottom:0px;
width:100%;
height:60px;
background:#6cf;
}
I guess you could do something like this:
#header {
background:#ff0;
padding:10px;
height: 15%;
}
#pageContainer {
padding:10px;
max-height: 70%;
overflow: auto;
}
#footer {
bottom:0;
width:100%;
height:15%;
background:#6cf;
}
Note that you need to specify your heights in percentages. Also padding might be an issue.
I'm tyring to nest three divs and have each. I want the appearance to look like each parent is 10px larger than it's child and be responsive when the horizontal width changes. When I do this with two DIVs everything works well.
CSS
#holder
{
margin:auto;
width:90%;
height:150px;
background-color:#999;
padding:10px;
border: 1px solid;
}
#inside
{
position:relative;
width:100%;
height:100%;
background-color:#9F0;
border: 1px solid;
}
HTML
When I add the third child, that's when it all goes wrong. The middle child (the green box) moves partially out of it's parent.
CSS
#holder
{
margin:auto;
width:90%;
height:150px;
background-color:#999;
padding:10px;
border: 1px solid;
}
#inside
{
position:relative;
width:100%;
height:100%;
background-color:#9F0;
border: 1px solid;
padding:10px;
}
#header
{
position:relative;
width:100%;
height:100%;
background-color:#C00;
}
HTML
<div id="holder">
<div id="inside">
<div id="header"/>
</div>
</div>
I do understand padding and margin and that those will add the "real" width and height of the box, but I can not figure out how to get these boxes inside of each other. things I have tried are below
playing with margins and padding
playing with different % on the widths of child boxes. This works to a point, but depending on the width of the browser window the ratio of the distance between the children changes.
Sounds like a cascade-type comment list.
Well... Remove the width from #inside and #header. DIVs are block-level elements.
Add
#holder div {
padding-left: 10px;
}
Every DIV under #holder will inherit the padding-left css property.
I think (and hope :P) that's what you were looking for.
I want to center an image and its title inside a div with this css code
.box {border:2px solid #0094ff;}
.title {background-color:pink;color:white;height:10px; line-height:3px; padding:10px;}
.content {color:#333;padding:10px;}
.box {
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
}
.titleIkon{
margin-right:2%;
display:table-cell;
vertical-align:middle;
}
By the look of this fiddle http://jsfiddle.net/7kx4r/ i can tell that nor the icon or the text is centered.How do i fix this?.
Remove unnecessary CSS and use the following CSS:
.title {background-color:pink;color:white; padding:10px; }
.titleIkon{
margin-right:2%;
display:inline;
}
DEMO
You need to make .title class display: table-cell;
.title{
margin-right:2%;
display:table-cell;
vertical-align:middle;
}
Fiddle
Note: Table-cell doesn't work in Old IE browsers
use text-align with your div having class title as
text-align: center;
check this fiddle http://jsfiddle.net/7kx4r/4/
something like this?
http://jsfiddle.net/7kx4r/8/
just add width:XXXpx; margin:0 auto;
Try it with this CSS:
.box {border:2px solid #0094ff;}
.title {background-color:pink;color:white;height:10px; line-height:3px; padding:10px;}
.content {color:#333;padding:10px;}
.box {
position:relative;
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
}
.titleIkon{
position:absolute;
top:50%;
margin-top: -8px;
}
What's going on here:
position:relative creates a new offset context for .box's children.
position:absolute tells .titleIkon to use offset parameters (left, right, top, bottom) relative to .box
top:50% tells .titleIkon that it should consider it's top edge position to be 50% of the height of the parent.
margin-top: -8px tells the browser to move the image up by half it's height (16px / 2 = 8px)
just define display:table-cell; vertical-align:middle; to your .title class.
its work IE8 to IE 10
see the dmeo - http://jsfiddle.net/7kx4r/10/
Hope you want this.
give text-align: center if you want only the pink line to be in center.http://jsfiddle.net/7kx4r/17/